Three.js + Cannon.js实战：5分钟搞定3D物理小球弹跳效果（附完整代码）

最新推荐文章于 2026-03-04 00:02:05 发布

原创

最新推荐文章于 2026-03-04 00:02:05 发布 · 994 阅读

标签

#Three.js #Cannon.js #3D #物理交互

从零到一：用Three.js与Cannon.js打造你的第一个3D物理弹跳球

你是否曾惊叹于网页游戏中那些流畅、逼真的物体碰撞与滚动效果？比如一个球从斜坡滚下，在障碍物间弹跳，最终稳稳停住——这种充满“物理感”的交互，曾是需要游戏引擎才能实现的复杂功能。但现在，借助 Three.js 和 Cannon.js 这两个强大的JavaScript库，任何前端开发者都能在浏览器中轻松构建出令人信服的3D物理世界。今天，我们不谈复杂的理论，就从最直观、最能带来成就感的效果开始：让一个小球在3D场景中自由下落、碰撞并弹跳。整个过程，我们目标明确：在5分钟内，用最精简的代码，让你看到物理模拟的魔力，并亲手获得一个可运行、可把玩的完整案例。

这篇文章面向的是已经对Three.js基础（场景、相机、渲染器、几何体）有所了解，但尚未接触过物理模拟的开发者。如果你一直好奇如何为静态的3D模型注入“生命”，让它们遵循重力、发生碰撞，那么这里就是绝佳的起点。我们将彻底避开繁琐的配置，直击核心，一步步拆解如何将Cannon.js物理引擎无缝集成到Three.js的渲染循环中，最终实现一个弹性十足的小球动画。准备好你的代码编辑器，我们即刻开始。

1. 项目初始化与双世界搭建

任何3D物理模拟项目，本质上都是在维护两个平行世界：一个是视觉渲染世界（由Three.js管理），负责决定物体看起来是什么样子、在屏幕的什么位置；另一个是物理计算世界（由Cannon.js管理），负责计算物体真实的位置、旋转、速度以及受力情况。我们的首要任务，就是同时创建这两个世界，并建立它们之间的通信桥梁。

首先，确保你的项目已经安装了必要的依赖。我们使用现代的ES模块方式引入。

npm install three cannon-es

接下来，创建一个HTML文件作为入口，并引入一个JavaScript模块。我们直接从最核心的代码开始。

// main.js
import * as THREE from 'three';
import * as CANNON from 'cannon-es';

// 1. 创建物理世界
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // 设置重力，Y轴向下，模拟地球重力

// 2. 创建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, 10); // 将相机拉远一点，以便看到全景

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x87ceeb); // 设置一个天空蓝的背景色
document.body.appendChild(renderer.domElement);

短短几行代码，两个世界的框架就搭建好了。CANNON.World 对象是物理模拟的核心容器，我们为其设置了Y轴负方向的重力加速度（9.82 m/s²）。Three.js的部分则是经典配置。这里有一个关键点：物理世界中的单位是“米”，而Three.js中的单位是“单位”。为了简化，我们在两个世界中使用1:1的比例对应，即物理世界中1米长的物体，在Three.js中也用1个单位长度来渲染。

为了让视角可以交互，我们添加一个轨道控制器。

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼，让控制器操作有惯性感