第十章 Three.js物理引擎与碰撞检测(二)

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 场景，实现基本的重力和碰撞效果。这为我们后续实现更复杂的物理效果和交互打下了基础。