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

前言

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

Cannon.js 是什么？

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

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

Cannon.js 的用途

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

安装 Cannon.js

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

bash 复制代码

npm install cannon-es

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

js 复制代码

import * as CANNON from 'cannon-es'

Vue3 示例：球体因重力下落

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

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

vue 复制代码

<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 渲染效果
该示例展示了最基本的重力作用：球体自然下落