Three.js 物理网格

提示词

PROMPT
1
使用 Three.js 和 Cannon-es 创建物理模拟，实现立方体和平面的物理碰撞效果。

效果描述

这是一个展示如何使用物理引擎的示例，立方体受重力影响下落并与平面碰撞。

效果特性

  • 物理模拟：使用 Cannon-es 物理引擎
  • 重力效果：立方体受重力影响下落
  • 碰撞检测：立方体与平面碰撞
  • 物理同步：Three.js 网格与物理体同步
  • 实时渲染：实时渲染物理状态
  • 轨道控制：使用 OrbitControls 控制视角

核心参数

参数 值 说明
重力 (0, -9.82, 0) 重力加速度
立方体质量 1 立方体质量
平面质量 0 平面质量（静态）
物理步长 1/60 物理模拟步长
物理子步 3 物理子步数

核心代码解析

创建物理世界

JAVASCRIPT
1
2
3
4
5
6
const world = new CANNON.World({ gravity: new CANNON.Vec3(0, -9.82, 0) });

world.PhysicsRender = (deltaTime) => {
    world.step(1 / 60, deltaTime, 3);
    world.bodies.forEach(body => body.render?.());
};

创建物理体

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function createPhysicsBody(PhysicsWorld, model, mass) {
    const box = new THREE.Box3().setFromObject(model);
    const { max, min } = box;
    const center = new THREE.Vector3();
    box.getCenter(center);

    const body = new CANNON.Body({
        mass: mass,
        shape: new CANNON.Box(new CANNON.Vec3((max.x - min.x) / 2, (max.y - min.y) / 2, (max.z - min.z) / 2)),
        position: center,
    });

    body.position.copy(model.position);
    PhysicsWorld.addBody(body);
    body.render = () => model.position.copy(body.position);
}

创建立方体

JAVASCRIPT
1
2
3
4
5
6
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
cubeMesh.position.set(0, 5, 0);
createPhysicsBody(world, cubeMesh, 1);
scene.add(cubeMesh);

创建平面

JAVASCRIPT
1
2
3
4
5
6
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, side: THREE.DoubleSide });
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
planeMesh.rotation.x = Math.PI / 2;
createPhysicsBody(world, planeMesh, 0);
scene.add(planeMesh);

技术亮点

  1. 物理模拟：使用 Cannon-es 物理引擎
  2. 重力效果：立方体受重力影响下落
  3. 碰撞检测：立方体与平面碰撞
  4. 物理同步：Three.js 网格与物理体同步
  5. 实时渲染：实时渲染物理状态

调试技巧

  1. 重力参数：调整重力参数改变下落速度
  2. 质量参数：调整质量参数影响碰撞
  3. 物理步长：调整物理步长影响模拟精度
  4. 物理子步：调整物理子步数提高精度
  5. 初始位置：调整初始位置测试碰撞

扩展方向

  1. 多个物体：添加多个物理物体
  2. 复杂形状：使用复杂形状的物理体
  3. 物理材质：添加物理材质
  4. 约束系统：添加约束系统
  5. 交互控制：添加交互控制

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。