01 - Cannon.js 引擎的用途和基本使用

作者: 前端AC | 原文: https://juejin.cn/post/7530106154313400330

01 - Cannon.js 引擎的用途和基本使用

前言

朱波想做游戏，前来学习这个cannon物理引擎，太好用了。

Cannon.js 是什么？

Cannon.js 是一个轻量级的 JavaScript 物理引擎，适用于 Web 应用和游戏开发。它专注于刚体物理模拟，能高效地处理物体间的碰撞、力学反应、摩擦等物理效果。

适用于 Three.js 等 WebGL 引擎配合使用，增强场景的真实物理行为。

---

Cannon.js 的用途

• 游戏开发中的物理碰撞检测与响应
• Web3D 场景中的物体重力、摩擦模拟
• 拖拽物体、堆叠、刚体运动模拟
• 教育和科学可视化中的物理实验

---

安装 Cannon.js

推荐使用 cannon-es（是 Cannon.js 的现代 ES module 重构版，维护活跃）

npm install cannon-es

如果你使用 Vue3 + Vite，安装完成后就可以像普通模块一样导入：

import * as CANNON from 'cannon-es'

---

Vue3 示例：球体因重力下落

我们来展示一个最简物理模拟示例：

• 一个球体在空中受到重力影响下落
• 不设置地面，不发生碰撞，仅用于演示重力作用

<script setup>
// 引入必要模块
import { onMounted, ref } from 'vue'
import * as THREE from 'three'
import * as CANNON from 'cannon-es'

// 创建 canvas 引用
const canvasRef = ref()

onMounted(() => {
  // 初始化 Three.js 场景
  const scene = new THREE.Scene()

  // 创建相机并设置位置
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(0, 5, 15)

  // 创建渲染器并绑定 canvas
  const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value })
  renderer.setSize(window.innerWidth, window.innerHeight)

  // 创建球体的几何体和材质，并生成 mesh
  const sphereGeometry = new THREE.SphereGeometry(1)
  const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0x0077ff })
  const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial)
  scene.add(sphereMesh)

  // 添加半球光照，增强视觉效果
  const light = new THREE.HemisphereLight(0xffffff, 0x444444, 1.2)
  light.position.set(0, 20, 0)
  scene.add(light)

  // 初始化 Cannon.js 世界
  const world = new CANNON.World()
  world.gravity.set(0, -9.82, 0) // 设置重力加速度，单位 m/s²

  // 创建一个球体刚体，初始位置在 y=10
  const ballBody = new CANNON.Body({
    mass: 1, // 质量为 1，表示会受到重力影响
    shape: new CANNON.Sphere(1), // 与 Three.js 中的球体对应
    position: new CANNON.Vec3(0, 10, 0),
  })
  world.addBody(ballBody)

  // 创建时间步长与时钟
  const clock = new THREE.Clock()
  const step = 1 / 60

  // 动画更新函数
  function animate() {
    requestAnimationFrame(animate) // 循环调用动画帧

    const delta = clock.getDelta() // 获取自上一帧的时间差
    world.step(step, delta) // 推进物理世界一步

    // 同步物理刚体位置到 Three.js mesh
    sphereMesh.position.copy(ballBody.position)

    // 渲染场景
    renderer.render(scene, camera)
  }

  animate() // 启动动画循环
})
</script>

<template>
  <!-- 渲染用 canvas 元素 -->
  <canvas ref="canvasRef"></canvas>
</template>

---

部分代码解释：

参数	含义	示例值	解释
75	视野角度（FOV）	75	像人眼视角那样，角度越大视野越广，但会有畸变
window.innerWidth / window.innerHeight	长宽比	比如 16:9	防止画面拉伸或压缩，使用窗口的实际比例
0.1	近裁剪面	0.1 米	相机能“看到”的最近距离，太小会有深度精度问题
1000	远裁剪面	1000 米	相机能“看到”的最远距离，超过这个距离的物体不会被渲染

行号	代码	解释
const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value });	创建一个 WebGL 渲染器（Renderer）实例，并将其渲染目标绑定到 Vue 模板中的 <canvas> 元素上。这样，Three.js 渲染结果会直接显示在页面上的这个 canvas 中。
renderer.setSize(window.innerWidth, window.innerHeight);	设置渲染器的宽度和高度为浏览器窗口的尺寸，使画布充满整个屏幕，避免图像变形或只显示一部分。

小结

• Cannon.js 用于模拟真实物理行为：重力、碰撞、摩擦等
• 推荐使用 cannon-es 模块，结合 Vue3 和 Three.js 渲染效果
• 该示例展示了最基本的重力作用：球体自然下落