10.2.4 同步物理世界与 Three.js 场景
我们需要在动画循环中更新物理世界，并同步 Three.js 网格的位置和旋转。
function animate() {
requestAnimationFrame(animate);
// 更新物理世界
world.step(1 / 60);
// 同步 Three.js 网格的位置和旋转
mesh.position.copy(boxBody.position);
mesh.quaternion.copy(boxBody.quaternion);
// 渲染场景
renderer.render(scene, camera);
}
animate();
10.3 碰撞检测与响应
碰撞检测是物理引擎的重要功能之一。我们可以通过监听物理世界中的碰撞事件来实现碰撞检测。
// 监听碰撞事件
boxBody.addEventListener(\’collide\’, function(event) {
console.log(\’Box collided with\’, event.body);
console.log(\’Collision velocity:\’, event.contact.getImpactVelocityAlongNormal());
});
10.4 物理效果应用示例
为了更好地理解物理引擎的使用，我们将实现一个简单的物理效果示例。
示例：重力与碰撞效果
在这个示例中，我们将创建多个立方体，并让它们在重力作用下掉落并相互碰撞。
// 创建多个立方体
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const boxMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
for (let i = 0; i < 10; i++) {
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
const boxShape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5));
const boxBody = new CANNON.Body({ mass: 1 });
boxBody.addShape(boxShape);
boxBody.position.set(Math.random() * 4 – 2, Math.random() * 4 + 2, Math.random() * 4 – 2);
world.addBody(boxBody);
scene.add(boxMesh);
// 同步位置和旋转
function syncPhysicsToGraphics() {
boxMesh.position.copy(boxBody.position);
boxMesh.quaternion.copy(boxBody.quaternion);
}
boxBody.addEventListener(\’collide\’, syncPhysicsToGraphics);
}
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 更新物理世界
world.step(1 / 60);
// 同步物体
scene.traverse(function(object) {
if (object.isMesh && object.body) {
object.position.copy(object.body.position);
object.quaternion.copy(object.body.quaternion);
}
});
// 渲染场景
renderer.render(scene, camera);
}
animate();
通过以上代码，我们可以创建一个带有物理效果的 Three.js 场景，实现基本的重力和碰撞效果。这为我们后续实现更复杂的物理效果和交互打下了基础。
来源：https://yuyan.blog.csdn.net/article/details/139756287
