参考大佬: https://www.codercto.com/a/33760.html
1. 实现思路
2. 关键代码及说明
three.js
版本:0.141.0
cannon
版本:github:schteppe/cannon.js
- 安装方式
npm install --save schteppe/cannon.js
- 安装方式
// Step.1. 创建和设置物理世界
// 创建世界
const world = new Cannon.World();
// 向y轴负方向,创建重力加速度
world.gravity.set(0, -9.82, 0);
// 碰撞检测
world.broadphase = new Cannon.NaiveBroadphase();
// Step.2. 创建物理世界的物体
// 创建化球形
const sphereShape = new Cannon.Sphere(1);
// 创建化球体
const sphereBody = new Cannon.Body({
mass: 5, // 质量
position: new Cannon.Vec3(0, 20, 0), // 位置
shape: sphereShape // 形状
});
// 创建到物理世界
world.addBody(sphereBody);
// 创建化平面形状
const groundShape = new Cannon.Plane();
// 创建平面物体
const groundBody = new Cannon.Body({
mass: 0,
shape: groundShape,
});
// 平面初始是垂直于x0z轴的平面的,因此旋转90度
groundBody.quaternion.setFromAxisAngle(new Cannon.Vec3(1, 0, 0), -0.5 * Math.PI);
// 将平面物体添加到物理世界
world.addBody(groundBody);
// Step.3. 创建3D物体
// 创建球形几何体
const sphereGeometry = new Three.SphereGeometry(1, 32, 32);
// 创建材质
const sphereMaterial = new Three.MeshStandardMaterial({
color: 0xff00ff
});
// 创建网格模型
const sphere = new Three.Mesh(sphereGeometry, sphereMaterial);
// 添加到场景
scene.add(sphere);
// 创建平面几何体
const groundGeometry = new Three.PlaneGeometry(100, 100, 32);
// 创建材质
const groundMaterial = new Three.MeshStandardMaterial({
color: 0xffffff,
side: Three.DoubleSide
});
// 创建平面几何体
const ground = new Three.Mesh(groundGeometry, groundMaterial);
// 同样的,平面初始是垂直于x0z轴的平面的,因此旋转90度
ground.rotation.x = -0.5 * Math.PI;
// 添加到场景
scene.add(ground);
// Step.4. 处理物理世界和3D世界的关联
// this.registerRenderFunc是追加一个requestAnimationFrame每帧执行的方法。第一个参数为方法名,更新方法内容使用;第二个参数为方法体。
this.registerRenderFunc('cannon-update', () => {
// 降落时间的步长,60fps相当于每帧下降1/60,
world.step(1 / 60);
// 把物理世界物体的位置、角度的状态,同步更新到对应的3D物体上
sphere.position.copy(sphereBody.position);
sphere.quaternion.copy(sphereBody.quaternion);
});