Three.js 物理引擎集成与交互式 3D 场景：从视觉渲染到物理仿真，Web3D 的真实感跃迁
一、Web3D 的真实感瓶颈：视觉渲染与物理行为的脱节
Three.js 是 Web 端最流行的 3D 渲染库，能够创建视觉精美的 3D 场景。但纯渲染场景中的物体是"幽灵"——它们穿过彼此、悬浮在空中、没有重量感。这种视觉渲染与物理行为的脱节，严重破坏了场景的沉浸感与交互可信度。
物理引擎的引入解决了这一问题：为 3D 物体赋予质量、碰撞体、摩擦力、弹性等物理属性，使物体在重力、碰撞、外力作用下产生符合直觉的运动。Cannon.js、Ammo.js、Rapier 是 Web 端主流的物理引擎选择，其中 Rapier 基于 Rust 编写、WASM 编译，性能最优且 API 设计现代。
二、Three.js 与物理引擎的集成架构
flowchart TD A[Three.js 场景] --> B[物理世界同步] B --> C[物理引擎计算] C --> D[物理状态回写] D --> A subgraph 渲染层 A1[Mesh: 视觉网格] A2[Material: 材质与纹理] A3[Light: 光照] end subgraph 物理层 C1[RigidBody: 刚体] C2[Collider: 碰撞体] C3[Joint: 关节约束] end subgraph 同步策略 B1[位置同步: physics → render] B2[碰撞事件: physics → game logic] B3[用户输入: game logic → physics] end A --> A1 A --> A2 A --> A3 C --> C1 C --> C2 C --> C3 B --> B1 B --> B2 B --> B3核心架构是"双世界"模式：Three.js 管理渲染世界，物理引擎管理物理世界。每帧的执行流程：1) 处理用户输入，施加物理力；2) 物理引擎步进计算；3) 将物理世界的位置与旋转同步到渲染世界。
三、工程实现：Three.js + Rapier 物理场景
// physics-scene.ts — Three.js + Rapier 物理场景管理器 import * as THREE from 'three'; import RAPIER from '@dimforge/rapier3d-compat'; interface PhysicsObject { mesh: THREE.Mesh; body: RAPIER.RigidBody; collider: RAPIER.Collider; } class PhysicsSceneManager { private scene: THREE.Scene; private camera: THREE.PerspectiveCamera; private renderer: THREE.WebGLRenderer; private world: RAPIER.World; private physicsObjects: PhysicsObject[] = []; private clock: THREE.Clock; async init(container: HTMLElement) { // 初始化 Three.js 渲染器 this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setSize(container.clientWidth, container.clientHeight); this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; container.appendChild(this.renderer.domElement); this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera( 60, container.clientWidth / container.clientHeight, 0.1, 1000 ); this.camera.position.set(0, 10, 20); // 初始化 Rapier 物理世界 await RAPIER.init(); const gravity = { x: 0.0, y: -9.81, z: 0.0 }; this.world = new RAPIER.World(gravity); this.clock = new THREE.Clock(); // 创建场景内容 this.createGround(); this.createLighting(); this.setupInteraction(); // 启动渲染循环 this.animate(); } // 创建地面：渲染网格 + 物理碰撞体 private createGround() { // 渲染层：带纹理的地面 const geometry = new THREE.PlaneGeometry(50, 50); const material = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.8, }); const mesh = new THREE.Mesh(geometry, material); mesh.rotation.x = -Math.PI / 2; mesh.receiveShadow = true; this.scene.add(mesh); // 物理层：静态刚体 + 地面碰撞体 const bodyDesc = RAPIER.RigidBodyDesc.fixed() .setTranslation(0, 0, 0); const body = this.world.createRigidBody(bodyDesc); const colliderDesc = RAPIER.ColliderDesc.cuboid(25, 0.1, 25) .setFriction(0.7) .setRestitution(0.3); // 弹性系数 this.world.createCollider(colliderDesc, body); } // 创建可交互的物理物体 addPhysicsBox( position: THREE.Vector3, size: THREE.Vector3 = new THREE.Vector3(1, 1, 1), mass: number = 1, color: number = 0x4488ff, ): PhysicsObject { // 渲染层 const geometry = new THREE.BoxGeometry(size.x, size.y, size.z); const material = new THREE.MeshStandardMaterial({ color }); const mesh = new THREE.Mesh(geometry, material); mesh.castShadow = true; mesh.receiveShadow = true; this.scene.add(mesh); // 物理层：动态刚体 const bodyDesc = RAPIER.RigidBodyDesc.dynamic() .setTranslation(position.x, position.y, position.z) .setAdditionalMass(mass); const body = this.world.createRigidBody(bodyDesc); // 碰撞体：与渲染网格尺寸一致 const colliderDesc = RAPIER.ColliderDesc.cuboid( size.x / 2, size.y / 2, size.z / 2 ) .setFriction(0.5) .setRestitution(0.4); const collider = this.world.createCollider(colliderDesc, body); const obj: PhysicsObject = { mesh, body, collider }; this.physicsObjects.push(obj); return obj; } // 施加力：用户交互驱动物理运动 applyForceToObject(obj: PhysicsObject, force: THREE.Vector3) { obj.body.applyImpulse( { x: force.x, y: force.y, z: force.z }, true // 唤醒休眠的刚体 ); } // 碰撞事件监听 setupCollisionHandler( onCollision: (obj1: PhysicsObject, obj2: PhysicsObject) => void ) { this.world.onCollisionEvent = (handle1, handle2, started) => { if (!started) return; // 仅处理碰撞开始事件 const obj1 = this.physicsObjects.find( o => o.collider.handle === handle1 ); const obj2 = this.physicsObjects.find( o => o.collider.handle === handle2 ); if (obj1 && obj2) { onCollision(obj1, obj2); } }; } // 渲染循环：物理步进 + 状态同步 private animate = () => { requestAnimationFrame(this.animate); const delta = this.clock.getDelta(); // 物理引擎步进（固定时间步长，避免帧率波动影响物理稳定性） const fixedDelta = 1 / 60; this.world.step(); // 同步物理状态到渲染世界 for (const obj of this.physicsObjects) { const position = obj.body.translation(); const rotation = obj.body.rotation(); obj.mesh.position.set(position.x, position.y, position.z); obj.mesh.quaternion.set(rotation.x, rotation.y, rotation.z, rotation.w); } this.renderer.render(this.scene, this.camera); }; // 鼠标交互：点击施加力 private setupInteraction() { const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); this.renderer.domElement.addEventListener('click', (event) => { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, this.camera); const intersects = raycaster.intersectObjects( this.physicsObjects.map(o => o.mesh) ); if (intersects.length > 0) { const hitMesh = intersects[0].object; const obj = this.physicsObjects.find(o => o.mesh === hitMesh); if (obj) { // 向上弹起 this.applyForceToObject(obj, new THREE.Vector3(0, 8, 0)); } } }); } }四、物理引擎集成的边界与权衡
物理步长的稳定性：物理引擎使用固定时间步长（通常 1/60 秒），而渲染帧率可能波动。如果渲染帧率低于物理帧率，需要在一帧内执行多次物理步进；如果渲染帧率远高于物理帧率，物理状态在多帧间不变，可使用插值平滑运动。
碰撞体的精度与性能：精确的碰撞体（如凸包、三角网格）计算开销大，简单碰撞体（球体、长方体）性能好但精度低。建议对复杂物体使用简化碰撞体（如用多个长方体组合近似），在精度与性能间取平衡。
网络同步的挑战：多人在线场景中，物理状态需要在客户端间同步。由于物理模拟的确定性受浮点精度影响，不同客户端可能产生不同的物理结果。解决方案是服务端权威物理 + 客户端预测回滚，但实现复杂度极高。
休眠机制的陷阱：物理引擎对静止物体自动休眠以节省计算，但休眠物体不会响应力直到被唤醒。上述代码中applyImpulse的第二个参数true确保唤醒休眠刚体，但遗漏此参数是常见 Bug。
五、总结
Three.js 与物理引擎的集成，将 Web3D 从"视觉展示"升级为"物理仿真"。核心架构是"双世界"模式：渲染世界管理视觉，物理世界管理行为，每帧同步状态。工程落地的关键在于：固定物理步长保障模拟稳定性、简化碰撞体平衡精度与性能、休眠刚体需显式唤醒、网络同步需服务端权威。物理引擎不是所有 3D 场景的必需品——纯展示场景无需物理，但交互式场景的真实感离不开物理仿真的支撑。
