three.js——物理引擎

在Three.js中，物理引擎通常指的是Cannon.js或AMMO.js等库，它们用于模拟真实的物理现象，如碰撞检测、弹簧、摩擦力等。

以下是一个使用Cannon.js与Three.js集成的基本示例：

// 引入Three.js和Cannon.js
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CannonWorker } from 'cannon-es';
 
// 场景、摄像机和渲染器设置
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 添加物体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 创建物理世界
const cannon = new CannonWorker();
cannon.useWorkers = false; // 因为workers不适合这个简单的例子
 
// 创建一个Cannon.js的几何体和物体，并添加到物理世界中
const shape = new CANNON.Box(new CANNON.Vec3(1, 1, 1));
const body = new CANNON.Body({
  mass: 1, // 定义质量
  position: new CANNON.Vec3(0, 5, 0), // 初始位置
  shape: shape,
});
cannon.addBody(body);
 
// 监听物理更新
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
 
  // 更新物理世界
  cannon.step(1 / 60); // 60 Hz更新率
 
  // 同步Three.js的场景和Cannon.js的物理体
  cube.position.copy(body.position);
  cube.quaternion.copy(body.quaternion);
}
 
animate();
 
// 添加OrbitControls来控制摄像机
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
 
// 输出当前的物理世界状态
cannon.onMessage = (message) => {
  if (message.op === 'step') {
    console.log(body.position.toArray()); // 查看物体的位置
  }
};

在这个例子中，我们创建了一个立方体作为Three.js的网格模型，并使用Cannon.js创建了一个对应的物理模型。然后我们每帧更新Three.js的渲染并监听Cannon.js的物理更新，并将物理体的位置同步到Three.js的网格模型上。这样，我们就可以在Three.js提供的交互式场景中模拟和展示物理现象。