Skip to content

T
ThreeJsLesson
Commit 311081b3 authored by Master Q's avatar Master Q
Browse files
Options

测试set_m_suspensionStiffness set_m_frictionSlip

parent 340f2a4d
Hide whitespace changes
Inline Side-by-side
Showing with 97 additions and 60 deletions
src/CarScene/index.ts
View file @ 311081b3
......@@ -7,6 +7,7 @@ import { FirstPersonCameraControl } from "../module/CameraControl/FirstControlCa
import { GLTFLoader } from "../module/loaders/GLTFLoader";
import { createAmmoTerrainBody, createRigidBodyByThreeObject, createTriangleShapeByGeometry } from "./tools";
import { MeshBasicMaterial } from "three";
import Stats from 'three/examples/jsm/libs/stats.module'
function gradTexture(color: [number[], string[]]) {
var c = document.createElement("canvas");
......@@ -106,12 +107,15 @@ export class CarScene extends PerspectiveScene {
this.camera.position.set(20, 20, 20)
this.camera.far = 400
this.OrbitControlsIns.enabled = false
// this.OrbitControlsIns.enabled = false
// this.OrbitControlsIns.enablePan = false
// this.OrbitControlsIns.enableDamping = true
// this.cameraControls = new FirstPersonCameraControl(this.camera)
// document.body.addEventListener('click', () => {
// this.cameraControls.lock()
// })
this.initStats()
this.initEvents()
this.initUi()
......@@ -121,6 +125,21 @@ export class CarScene extends PerspectiveScene {
this.initAmmoPhySicWorld()
}
initStats() {
const statsIns = Stats()
console.log('===========Stats: ============\n', statsIns)
// 设置监视器面板，传入面板id（0: fps, 1: ms, 2: mb）
statsIns.setMode(0)
statsIns.domElement.style.position = 'fixed'
statsIns.domElement.style.left = '0px'
statsIns.domElement.style.top = '0px'
document.body.appendChild(statsIns.domElement)
this.addEventListener(EVENTS_ENUM.ENTERFRAME, function() {
statsIns.update()
})
}
initUi() {
const reflectionCube = new THREE.CubeTextureLoader()
.setPath( '天空盒子4/' )
......@@ -205,12 +224,11 @@ export class CarScene extends PerspectiveScene {
}
GLTFLoaderIns.load('shamo_V10.gltf', (ins: GltfModel) => {
ins.scene.scale.set(200, 200, 200)
this.scene.add(ins.scene)
console.log(ins)
let terrainMesh: THREE.Mesh
this.scene.add(ins.scene)
ins.scene.scale.set(200, 200, 200)
ins.scene.traverse((obj: THREE.Object3D) => {
// @ts-ignore
if (obj.name.startsWith('qigan') && obj.isMesh) {
......@@ -242,10 +260,13 @@ export class CarScene extends PerspectiveScene {
// @ts-ignore
window['terrainMesh'] = terrainMesh
terrainMesh.receiveShadow = true
// @ts-ignore
terrainMesh.material.side = THREE.FrontSide
if (terrainMesh) {
terrainMesh.receiveShadow = true
// @ts-ignore
terrainMesh.material.side = THREE.FrontSide
}
// 旗子动画
const animationMixer = new THREE.AnimationMixer(ins.scene)
const animationAction = animationMixer.clipAction(ins.animations[0])
animationAction.play()
......@@ -253,26 +274,13 @@ export class CarScene extends PerspectiveScene {
animationMixer.update(e.data.delta)
})
// function getModalMesh(ob3: THREE.Object3D):any {
// for (let i = 0; i < ob3.children.length; i++) {
// // @ts-ignore
// const dd = ob3.children[i].name.startsWith("shamo") ? ob3.children[i] : getModalMesh(ob3.children[i])
// if (dd) return dd
// }
// return undefined
// }
// const modalMesh: THREE.Mesh = getModalMesh(ins.scene)
// @ts-ignore
// modalMesh.material.wireframe = true
// new MeshBasicMaterial({
// side: THREE.DoubleSide
// })
// // @ts-ignore
// const [worldbody, mesh] = createAmmoTerrainBody(array, 6, 200)
// // @ts-ignore
// this.ammoPhysicWorld.physicWorld.addRigidBody(worldbody)
// this.scene.add(mesh as THREE.Mesh)
// 添加 地形
this.ammoPhysicWorld.addRigidBodyWithMeshObj(createRigidBodyByThreeObject(
terrainMesh,
{
......@@ -280,6 +288,8 @@ export class CarScene extends PerspectiveScene {
mass: 0
}
))
// 添加车
const vehicleIns = this.vehicleIns = new Vehicle(new THREE.Vector3(10, 10, 0), ZERO_QUATERNION)
this.scene.add(vehicleIns)
this.ammoPhysicWorld.addDynamicBody(vehicleIns)
......@@ -287,6 +297,29 @@ export class CarScene extends PerspectiveScene {
window['vehicleIns'] = vehicleIns
this.dirLight.target = vehicleIns.chassisMesh
const planeGeometry = new THREE.BoxGeometry(100, 2, 100)
// planeGeometry.rotateX( - Math.PI / 2 ); // 这里加了旋转矩阵 物理世界 记得要转换一下
const planeMesh = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
// wireframe: true
}))
planeMesh.receiveShadow = true
planeMesh.position.y = -1
this.scene.add(planeMesh)
this.ammoPhysicWorld.addMesh(planeMesh, {
friction: 10,
restitution: 0.1,
mass: 0
})
this.ammoPhysicWorld.addRigidBodyWithMeshObj(createRigidBodyByThreeObject(
planeMesh,
{
mass: 0
}
))
// 下面是测试模型数据
const boxGeometry = new THREE.BoxGeometry(1,1,1, 10, 10, 10)
const material = new THREE.MeshLambertMaterial({
// wireframe: true,
......@@ -328,6 +361,8 @@ export class CarScene extends PerspectiveScene {
}
))
// const geometry = tt.geometry
// const triangleMesh = new Ammo.btTriangleMesh(true, true)
......@@ -418,29 +453,6 @@ export class CarScene extends PerspectiveScene {
// ))
})
// const planeGeometry = new THREE.BoxGeometry(30, 30, 2)
// planeGeometry.rotateX( - Math.PI / 2 );
// const planeMesh = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial({
// color: 0xffffff,
// side: THREE.DoubleSide,
// wireframe: true
// }))
// planeMesh.receiveShadow = true
// // planeMesh.position.y = -1
// this.scene.add(planeMesh)
// // this.ammoPhysicWorld.addMesh(planeMesh, {
// // // friction: 2,
// // restitution: 0.1
// // })
// console.log('123123====>>>>', planeMesh)
// this.ammoPhysicWorld.addRigidBodyWithMeshObj(createRigidBodyByThreeObject(
// planeMesh,
// {
// mass: 0
// }
// ))
// this.scene.add(new THREE.Mesh(new THREE.PlaneBufferGeometry(100, 100, 99, 99), new THREE.MeshBasicMaterial({
// wireframe: true
// }))).position.set(0, 4, 0)
......@@ -619,7 +631,8 @@ export class CarScene extends PerspectiveScene {
// const m3 = new THREE.Matrix3()
// relativeCameraOffset.applyMatrix3(m3.setFromMatrix4(this.vehicleIns.chassisMesh.matrixWorld))
_defaultVector3.applyMatrix4(this.vehicleIns.chassisMesh.matrixWorld)
this.camera.position.copy(_defaultVector3)
this.camera.position.lerp(_defaultVector3, 0.1)
// this.camera.position.copy(_defaultVector3)
this.camera.lookAt(carPosition)
......
src/CarScene/tools.ts
View file @ 311081b3
......@@ -48,6 +48,8 @@ export function createRigidBody(physicsShape: Ammo.btCollisionShape, cfg: Partia
if (mass > 0) {
rigidBody.setActivationState(4)
}
// 自己加一个属性
rigidBody._mass = mass
return rigidBody
}
......
src/CarScene/vehicle.ts
View file @ 311081b3
......@@ -50,6 +50,10 @@ interface GltfModel {
scene: THREE.Scene,
}
const VehicleDebugConfig = {
debugger: false
}
export class Vehicle extends THREE.Object3D{
chassisMesh: THREE.Group // 车身
......@@ -101,6 +105,7 @@ export class Vehicle extends THREE.Object3D{
var chassisMesh = this.chassisMesh = this.createChassisMesh(chassisWidth, chassisHeight, chassisLength);
GLTFLoaderIns.load('qiche.gltf', (gltf: GltfModel) => {
chassisMesh.add(gltf.scene)
gltf.scene.visible = !VehicleDebugConfig.debugger
gltf.scene.translateY(-0.6)
gltf.scene.traverse(function(obj) {
......@@ -287,13 +292,14 @@ export class Vehicle extends THREE.Object3D{
tuning,
isFront);
// 悬架刚度？
// 悬架刚度？ set_m_suspensionStiffness set_m_frictionSlip 有点冲突好像
wheelInfo.set_m_suspensionStiffness(suspensionStiffness);
wheelInfo.set_m_wheelsDampingRelaxation(suspensionDamping);
wheelInfo.set_m_wheelsDampingCompression(suspensionCompression);
wheelInfo.set_m_frictionSlip(friction); // 摩擦系数
wheelInfo.set_m_rollInfluence(rollInfluence);
this.wheelMeshes[index] = this.createWheelMesh(radius, width);
}
......@@ -303,16 +309,11 @@ export class Vehicle extends THREE.Object3D{
t.rotateZ(Math.PI / 2);
var mesh = new THREE.Mesh(t, materialInteractive);
mesh.add(new THREE.Mesh(new THREE.BoxGeometry(width * 1.5, radius * 1.75, radius*.25, 1, 1, 1), materialInteractive));
mesh.castShadow = true
mesh.castShadow = VehicleDebugConfig.debugger
mesh.visible = VehicleDebugConfig.debugger
group.add(mesh);
mesh.visible = false
const luntai = this.luntaiIns.scene.clone()
luntai.traverse(function(obj) {
// @ts-ignore
if (obj.isMesh) {
obj.castShadow = true
}
})
luntai.visible = !VehicleDebugConfig.debugger
group.add(luntai)
this.add(group)
return group;
......@@ -323,7 +324,7 @@ export class Vehicle extends THREE.Object3D{
var shape = new THREE.BoxGeometry(w, l, h, 1, 1, 1);
var mesh = new THREE.Mesh(shape, materialInteractive);
mesh.castShadow = true
mesh.visible = false
mesh.visible = VehicleDebugConfig.debugger
group.add(mesh);
this.add(group)
return group;
......@@ -337,6 +338,7 @@ export class Vehicle extends THREE.Object3D{
var rayCaster = new Ammo.btDefaultVehicleRaycaster(physicsWorld); // 创建了一个射线投射
var vehicle = this.raycastVehicle = new Ammo.btRaycastVehicle(tuning, this.chassisRidigBody, rayCaster); // 通过车辆和射线投射创建了一个车辆
// 设置坐标系统，rightIndex为右方向的索引，upIndex为上方向索引，forwardIndex为前进方向索引
vehicle.setCoordinateSystem(0, 1, 2); // 设置坐标系?
physicsWorld.addAction(vehicle); // addAction
......@@ -355,6 +357,13 @@ export class Vehicle extends THREE.Object3D{
const LuntaiIns = this.luntaiIns = await new Promise<GltfModel>(resolve => {
GLTFLoaderIns.load('luntai.gltf', (ins: GltfModel) => {
ins.scene.traverse(function(obj) {
// @ts-ignore
if (obj.isMesh) {
obj.castShadow = true
}
})
resolve(ins)
})
})
......@@ -386,9 +395,10 @@ export class Vehicle extends THREE.Object3D{
this.actions[actionName] = false
}
update() {
update(delta: number) {
const vehicle = this.raycastVehicle
const tuning = this.btVehicleTuning
// vehicle.updateFriction(delta)
var speed = vehicle.getCurrentSpeedKmHour();
......@@ -402,7 +412,7 @@ export class Vehicle extends THREE.Object3D{
const turnLeft = this.actions.left || KeyBoardStateStore.isPressed('a')
if (!isAccelerating && !isBreaking && speed !== 0) {
if (Math.abs(speed) < 0.2) {
if (Math.abs(speed) < 0.02) {
speed = 0
} else {
if (speed > 0) {
......
src/module/AmmoPhysicWorld/index.ts
View file @ 311081b3
......@@ -115,7 +115,11 @@ export class AmmoPhysicWorld {
addRigidBodyWithMeshObj(body: Ammo.btRigidBody) {
this.physicWorld.addRigidBody(body)
this.rigidBodyList.push(body)
// TODO 这里先 mass 0 都去 更新视图 世界好了
if (true || body._mass != 0) {
this.rigidBodyList.push(body)
}
}
addDynamicBody(body: DynamicBody) {
......
src/module/OrbitControls/index.ts
View file @ 311081b3
......@@ -17,11 +17,16 @@ const _endEvent = {
};
export class OrbitControls extends THREE.EventDispatcher {
update() {
throw new Error('Method not implemented.');
}
minDistance: number
maxDistance: number
maxZoom: number;
minZoom: number;
enabled: boolean;
enableDamping: boolean;
enablePan: boolean;
constructor( object, domElement ) {
super();
......
src/module/PerspectiveScene.ts
View file @ 311081b3
......@@ -76,10 +76,11 @@ export class PerspectiveScene extends EventDispatcher<EVENTS_ENUM> {
* 初始化事件
*/
private __initEvents() {
this.frameLoop()
const OrbitControlsIns = this.OrbitControlsIns = new OrbitControls(this.camera, this.rendererDom)
this.frameLoop()
window.addEventListener('resize', this.onWindowResize)
}
......@@ -111,6 +112,7 @@ export class PerspectiveScene extends EventDispatcher<EVENTS_ENUM> {
// frame rander
this.renderer.render(this.scene, this.camera)
this.OrbitControlsIns.update()
requestAnimationFrame(this.frameLoop.bind(this))
}
}
\ No newline at end of file
src/types/ammo.d.ts
View file @ 311081b3
......@@ -484,6 +484,7 @@ declare namespace Ammo {
}
class btRigidBody extends btCollisionObject {
meshData: any;
_mass: number;
constructor(constructionInfo: btRigidBodyConstructionInfo);
getCenterOfMassTransform(): btTransform;
setCenterOfMassTransform(xform: btTransform): void;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment