cannon-es 物理引擎入门指南：构建你的第一个3D物理模拟
【免费下载链接】cannon-es 
项目地址: https://gitcode.com/gh_mirrors/ca/cannon-es
什么是cannon-es
cannon-es 是一个轻量级且易于使用的3D物理引擎，专为Web环境设计。它采用了类似three.js的简洁API风格，基于现代物理引擎技术实现。这个引擎使用国际单位制（SI单位），包括米（m）、千克（kg）、秒（s）等，让物理模拟更加真实准确。
核心概念
物理世界（World）
物理世界是所有物理实体存在和交互的容器。创建世界时，我们需要定义重力加速度等基本参数。
const world = new CANNON.World({
gravity: new CANNON.Vec3(0, -9.82, 0) // 模拟地球重力，单位m/s²
})
时间步进（Stepping）
物理模拟需要通过时间步进来推进。cannon-es提供了两种步进方式：
- fixedStep() - 固定时间步长，适合大多数情况
world.fixedStep() // 默认60fps
- step() - 手动控制时间步长，适合需要精确控制的高级场景
刚体（Rigid Body）
刚体是物理世界中的基本实体，分为三种类型：
- 动态刚体（Dynamic）：有质量，受力和碰撞影响
- 运动学刚体（Kinematic）：不受力影响但可通过速度控制
- 静态刚体（Static）：固定不动，质量设为0自动成为静态
创建刚体示例
// 动态球体
const sphere = new CANNON.Body({
mass: 5, // 质量(kg)
shape: new CANNON.Sphere(1) // 半径1米
})
// 静态地面
const ground = new CANNON.Body({
type: CANNON.Body.STATIC,
shape: new CANNON.Plane()
})
ground.quaternion.setFromEuler(-Math.PI/2, 0, 0) // 旋转使平面朝上
形状类型
cannon-es支持多种碰撞形状：
- 基本形状：球体(Sphere)、盒子(Box)、平面(Plane)、圆柱(Cylinder)
- 复杂形状：凸多面体(ConvexPolyhedron)、粒子(Particle)、高度场(Heightfield)、三角网格(Trimesh)
完整示例
下面是一个完整的物理模拟示例，展示球体在重力作用下落到地面的过程：
import * as CANNON from 'cannon-es'
// 1. 创建物理世界
const world = new CANNON.World({
gravity: new CANNON.Vec3(0, -9.82, 0)
})
// 2. 创建动态球体
const sphere = new CANNON.Body({
mass: 5,
shape: new CANNON.Sphere(1),
position: new CANNON.Vec3(0, 10, 0)
})
world.addBody(sphere)
// 3. 创建静态地面
const ground = new CANNON.Body({
type: CANNON.Body.STATIC,
shape: new CANNON.Plane()
})
ground.quaternion.setFromEuler(-Math.PI/2, 0, 0)
world.addBody(ground)
// 4. 动画循环
function animate() {
requestAnimationFrame(animate)
world.fixedStep()
console.log(`球体Y坐标: ${sphere.position.y}`)
}
animate()
最佳实践
- 单位一致性：保持所有物理参数使用SI单位制
- 性能优化：对于静态物体，确保设置mass=0或type=STATIC
- 时间步进：大多数情况下使用fixedStep()即可
- 调试：通过console.log输出关键物体位置观察模拟效果
通过这篇指南，你应该已经掌握了cannon-es的基本使用方法。接下来可以尝试添加更多物体、实现碰撞检测或与three.js等3D库结合创建可视化效果。
【免费下载链接】cannon-es 项目地址: https://gitcode.com/gh_mirrors/ca/cannon-es
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
