Cannon.js 使用教程
项目介绍
Cannon.js 是一个开源的 JavaScript 3D 物理引擎,由 Stefan Hedman 开发。它完全用 JavaScript 编写,旨在为网页提供轻量级且高效的物理模拟。Cannon.js 支持刚体动力学、离散碰撞检测和约束求解等功能,适用于游戏开发和交互式应用。
项目快速启动
安装
首先,通过 npm 安装 Cannon.js:
npm install cannon
基本使用
以下是一个简单的示例,展示如何在网页中使用 Cannon.js 进行物理模拟:
// 引入 Cannon.js
import * as CANNON from 'cannon';
// 创建世界
const world = new CANNON.World();
world.gravity.set(0, 0, -9.82); // 设置重力
// 创建一个球体
const sphereBody = new CANNON.Body({
mass: 5, // 质量
position: new CANNON.Vec3(0, 0, 10), // 初始位置
shape: new CANNON.Sphere(1) // 球体形状
});
world.addBody(sphereBody);
// 创建一个平面
const groundBody = new CANNON.Body({
mass: 0, // 静态物体
shape: new CANNON.Plane()
});
world.addBody(groundBody);
// 模拟循环
let lastTime;
function simloop(time) {
requestAnimationFrame(simloop);
if (lastTime !== undefined) {
const dt = (time - lastTime) / 1000;
world.step(1 / 60, dt, 3);
}
console.log("Sphere z position: " + sphereBody.position.z);
lastTime = time;
}
simloop();
应用案例和最佳实践
游戏开发
Cannon.js 常用于游戏开发中,为游戏对象提供物理交互。例如,在第一人称射击游戏中,可以使用 Cannon.js 模拟子弹的飞行轨迹和碰撞效果。
交互式应用
在交互式应用中,Cannon.js 可以用于模拟物体的物理行为,增强用户体验。例如,在虚拟现实应用中,可以使用 Cannon.js 模拟物体的重力和碰撞效果。
典型生态项目
Three.js 集成
Cannon.js 常与 Three.js 结合使用,为 Three.js 中的 3D 对象提供物理模拟。以下是一个简单的示例:
import * as THREE from 'three';
import * as CANNON from 'cannon';
// 创建 Three.js 场景
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);
// 创建 Cannon.js 世界
const world = new CANNON.World();
world.gravity.set(0, 0, -9.82);
// 创建 Three.js 球体
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
// 创建 Cannon.js 球体
const sphereBody = new CANNON.Body({
mass: 5,
position: new CANNON.Vec3(0, 0, 10),
shape: new CANNON.Sphere(1)
});
world.addBody(sphereBody);
// 创建 Three.js 平面
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
// 创建 Cannon.js 平面
const groundBody = new CANNON