使用 Cannon.js 实现物理模拟效果

npm install cannon

// 创建物理世界实例
const world = new CANNON.World();
 
// 设置重力，y轴方向为 -9.82 m/s^2
world.gravity.set(0, -9.82, 0); // 模拟和地球相近的重力加速度
 
// 允许物体进入休眠状态，提高性能
world.allowSleep = true;
 
// 设置碰撞检测算法
world.broadphase = new CANNON.NaiveBroadphase();

// 创建球体形状
const sphereShape = new CANNON.Sphere(1); // 半径为 1
 
// 定义刚体属性
const sphereMaterial = new CANNON.Material("sphereMaterial");
const sphereBody = new CANNON.Body({
  mass: 1, // 质量为 1 kg
  shape: sphereShape,
  material: sphereMaterial, // 设置材质
  linearDamping: 0.2, // 设置线性阻尼
});
 
// 设置初始位置
sphereBody.position.set(0, 10, 0);
 
// 将刚体添加到物理世界
world.addBody(sphereBody);

// 创建一个平面形状
const groundShape = new CANNON.Plane();
const groundBody = new CANNON.Body({
  mass: 0, // 质量为 0 的物体不会移动
});
 
// 将平面形状添加到刚体，并设置方向
groundBody.addShape(groundShape);
// 让平面朝上，所以绕 x 轴旋转 -90°
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
 
// 把地板刚体加入物理世界
world.addBody(groundBody);

const clock = new THREE.Clock(); // 用于获取时间间隔
const fixedTimeStep = 1 / 60; // 1/60 秒
 
function animate() {
  requestAnimationFrame(animate);
 
  // 获取上一帧到当前帧的时间
  const delta = clock.getDelta();
 
  // 让物理世界步进
  // 参数：固定时间步、子步进次数（可选）
  world.step(fixedTimeStep, delta, 3);
 
  // 同步物理世界与 Three.js 世界
  sphereMesh.position.copy(sphereBody.position);
  sphereMesh.quaternion.copy(sphereBody.quaternion);
 
  // 继续渲染
  renderer.render(scene, camera);
}
 
animate();

// 创建 Three.js 场景和相机
const scene = new THREE.Scene();
 
// 透视相机
const camera = new THREE.PerspectiveCamera(
  75, // 视野角度（FOV）
  window.innerWidth / window.innerHeight, // 纵横比
  0.1, // 近截面
  1000 // 远截面
);
camera.position.set(0, 5, 15);
 
// 创建渲染器并添加到页面
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 添加一个简单的环境光，让场景不至于黑漆漆
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
 
// 添加一个平面，作为地板
const planeGeometry = new THREE.PlaneGeometry(50, 50);
const planeMaterial = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotateX(-Math.PI / 2); // 让平面水平
scene.add(plane);

// 创建球体网格
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32); // 半径 1，分段数 32
const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 }); // 红色材质
const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphereMesh);
 
// 同步物理世界和 Three.js 的网格
function syncPhysics() {
  // 将刚体的位置同步到网格对象
  sphereMesh.position.copy(sphereBody.position);
 
  // 将刚体的旋转四元数同步到网格对象
  sphereMesh.quaternion.copy(sphereBody.quaternion);
}

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 动画循环
function animate() {
  requestAnimationFrame(animate);
 
  // 更新物理世界
  world.step(timeStep);
 
  // 同步物理世界和 Three.js
  syncPhysics();
 
  // 渲染场景
  renderer.render(scene, camera);
}
 
animate();

// 引入必要库
import * as THREE from "three";
import * as CANNON from "cannon";
 
// 初始化物理世界
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
 
// 创建物理材质
const groundMaterial = new CANNON.Material("ground");
const sphereMaterial = new CANNON.Material("sphere");
 
// 创建接触材质
const contactMaterial = new CANNON.ContactMaterial(groundMaterial, sphereMaterial, {
  restitution: 0.7, // 反弹系数
  friction: 0.3, // 摩擦系数
});
world.addContactMaterial(contactMaterial);
 
// 创建地面刚体
const groundShape = new CANNON.Plane();
const groundBody = new CANNON.Body({
  mass: 0,
  shape: groundShape,
  material: groundMaterial, // 应用物理材质
});
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
world.addBody(groundBody);
 
// 创建球体刚体
const sphereShape = new CANNON.Sphere(1);
const sphereBody = new CANNON.Body({
  mass: 1,
  shape: sphereShape,
  material: sphereMaterial, // 应用物理材质
});
sphereBody.position.set(0, 10, 0);
world.addBody(sphereBody);
 
// 初始化 Three.js 场景
const scene = new THREE.Scene();
 
// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);
 
// 创建地面网格
const groundGeometry = new THREE.PlaneGeometry(30, 30);
const groundMeshMaterial = new THREE.MeshStandardMaterial({
  color: 0x808080,
  side: THREE.DoubleSide,
});
const groundMesh = new THREE.Mesh(groundGeometry, groundMeshMaterial);
groundMesh.rotation.x = -Math.PI / 2;
scene.add(groundMesh);
 
// 创建球体网格
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMeshMaterial = new THREE.MeshStandardMaterial({ color: 0x3498db });
const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMeshMaterial);
scene.add(sphereMesh);
 
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 时间步长
const timeStep = 1 / 60;
 
// 动画循环
function animate() {
  requestAnimationFrame(animate);
  world.step(timeStep);
  sphereMesh.position.copy(sphereBody.position);
  sphereMesh.quaternion.copy(sphereBody.quaternion);
  renderer.render(scene, camera);
}
 
// 初始化摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 15);
camera.lookAt(0, 0, 0);
scene.add(camera);
 
animate();