我想创建一个车辆,它在 three.js 和 cannon.js 中四处移动。但是当我更新 three.js 模型的位置时,它也向后移动得很少我不知道是什么导致了这个问题?是秤吗??
我删除了相机、渲染器等不必要的 three.js 部分......所以它更容易阅读。如果你想试试我可以提供整个代码。
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as CANNON from 'cannon-es'
import CannonDebugger from 'cannon-es-debugger'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'
const gltfLoader = new GLTFLoader(loadingManager)
const rover_group = new THREE.Group();
const rover = []
const seda= new THREE.MeshPhongMaterial()
gltfLoader.load('./models/Rover.gltf', function(model) { //VELKEJ
model.scene.traverse(part => {
rover.push(part)
part.receiveShadow = true
part.castShadow = true
if (part.isMesh) {
if(part.name == 'Kolo1') {
part.material = seda
}
if(part.name == 'Kolo2') {
part.material = seda
}
if(part.name == 'Kolo3') {
part.material = seda
}
if(part.name == 'Kolo4') {
part.material = seda
}
if(part.name == 'Rover') part.material = seda
}
});
rover.forEach(part => {
rover_group.add(part)
})
rover_group.scale.set(0.004,0.004,0.004)
rover_group.children[1].position.x = -4
rover_group.rotation.set(0,Math.PI,0)
scene.add(rover_group)
console.log(rover_group)
})
//CANNON WORLD
const physicsWorld = new CANNON.World({
gravity: new CANNON.Vec3(0, -9.82, 0)
})
//Floor
const groundBody = new CANNON.Body ({
type: CANNON.Body.STATIC,
shape: new CANNON.Plane()
});
// rotate ground body by 90 degrees
groundBody.quaternion.setFromEuler(-Math.PI/2, 0, 0);
//Add to floor to scene
physicsWorld.addBody (groundBody);
//Create a cannon.js car body
//Cannon.js body
const carBody = new CANNON.Body({
mass: 20,
position: new CANNON. Vec3(0, 6, 0),
shape: new CANNON.Box (new CANNON. Vec3(0.8, 0.1, 0.4)),
})
const vehicle = new CANNON.RigidVehicle({
chassisBody: carBody
})
const mass = 1;
const axisWidth = 0.2;
const wheelShape = new CANNON.Sphere(0.2);
const wheelMaterial = new CANNON.Material('wheel');
const down = new CANNON.Vec3(0, -1, 0);
//Wheel front left
const wheelBody1 = new CANNON.Body({ mass, material: wheelMaterial });
wheelBody1.addShape(wheelShape);
wheelBody1.angularDamping = 0.4;
vehicle.addWheel({
body: wheelBody1,
position: new CANNON.Vec3(-0.4, 0, axisWidth / 0.4),
axis: new CANNON.Vec3(0, 0, 1),
direction: down,
})
//Wheel front right
const wheelBody2 = new CANNON.Body({ mass, material: wheelMaterial });
wheelBody2.addShape(wheelShape);
wheelBody2.angularDamping = 0.4;
vehicle.addWheel({
body: wheelBody2,
position: new CANNON.Vec3(-0.4, 0, -axisWidth / 0.4),
axis: new CANNON.Vec3(0, 0, 1),
direction: down,
})
//Wheel back right
const wheelBody3 = new CANNON.Body({ mass, material: wheelMaterial });
wheelBody3.addShape(wheelShape);
wheelBody3.angularDamping = 0.4;
vehicle.addWheel({
body: wheelBody3,
position: new CANNON.Vec3(0.4, 0, -axisWidth / 0.4),
axis: new CANNON.Vec3(0, 0, 1),
direction: down,
})
//Wheel back left
const wheelBody4 = new CANNON.Body({ mass, material: wheelMaterial });
wheelBody4.addShape(wheelShape);
wheelBody4.angularDamping = 0.4;
vehicle.addWheel({
body: wheelBody4,
position: new CANNON.Vec3(0.4, 0, axisWidth / 0.4),
axis: new CANNON.Vec3(0, 0, 1),
direction: down,
})
vehicle.addToWorld(physicsWorld)
//Debugger
const cannonDebuger = new CannonDebugger(scene, physicsWorld)
const clock = new THREE.Clock()
let oldElapsedTime = 0
//Animate
const Animate = () => {
const elapsedTime = clock.getElapsedTime()
const deltaTime = elapsedTime - oldElapsedTime
oldElapsedTime = elapsedTime
//Update physics world
physicsWorld.step(1 / 60, deltaTime, 3)
rover_group.children[1].position.copy(carBody.position)
rover_group.children[1].quaternion.copy(carBody.quaternion)
///////LEFT FRONT
rover_group.children[5].position.copy(wheelBody1.position)
rover_group.children[5].quaternion.copy(wheelBody1.quaternion)
///////RIGHT FRONT
rover_group.children[2].position.copy(wheelBody2.position)
rover_group.children[2].quaternion.copy(wheelBody2.quaternion)
////////LEFT BACK
rover_group.children[4].position.copy(wheelBody4.position)
rover_group.children[4].quaternion.copy(wheelBody4.quaternion)
//////RIGHT BACK
rover_group.children[3].position.copy(wheelBody4.position)
rover_group.children[3].position.copy(wheelBody4.quaternion)
cannonDebuger.update()
window.requestAnimationFrame(Animate)
// Update controls
controls.update()
// Render
renderer.render(scene, camera)
}
Animate()