Cannon.js 使用教程

最新推荐文章于 2025-05-10 08:53:37 发布

原创最新推荐文章于 2025-05-10 08:53:37 发布 · 638 阅读

3 ·

CC 4.0 BY-SA版权

Cannon.js 使用教程

项目地址:https://gitcode.com/gh_mirrors/ca/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

cannon.js A lightweight 3D physics engine written in JavaScript. 项目地址: https://gitcode.com/gh_mirrors/ca/cannon.js