第十章 Three.js物理引擎与碰撞检测(一)

10.1 物理引擎基础

物理引擎用于模拟物体的物理行为，如重力、碰撞、摩擦力等。在 Three.js 中，我们可以使用外部物理引擎库来增强我们的 3D 场景的物理效果。常用的物理引擎有 Cannon.js、Ammo.js 和 Oimo.js。本章我们将重点介绍 Cannon.js，并展示如何将其集成到 Three.js 项目中。

10.2 使用 Cannon.js 集成物理效果

Cannon.js 是一个强大的物理引擎，用于创建逼真的物理效果。我们将学习如何将 Cannon.js 集成到 Three.js 项目中，并实现一些基本的物理效果。

10.2.1 安装 Cannon.js

首先，通过 npm 安装 Cannon.js：

npm install cannon

10.2.2 基本设置

接下来，我们需要在项目中引入 Cannon.js 并设置基本的物理世界。

// 引入 Three.js
import * as THREE from 'three';
// 引入 Cannon.js
import * as CANNON from 'cannon';

// 创建 Three.js 场景
const scene = new THREE.Scene();

// 创建物理世界
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // 设置重力
world.broadphase = new CANNON.NaiveBroadphase();
world.solver.iterations = 10;

// 创建 Three.js 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 添加光照
const light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1).normalize();
scene.add(light);

10.2.3 创建物理物体

我们将创建一个物理物体，并同步到 Three.js 中。

// 创建一个地板
const groundBody = new CANNON.Body({
    mass: 0, // 地板质量为 0，表示不受重力影响
    position: new CANNON.Vec3(0, -1, 0),
    shape: new CANNON.Plane()
});
groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
world.addBody(groundBody);

// 创建一个立方体
const boxShape = new CANNON.Box(new CANNON.Vec3(1, 1, 1));
const boxBody = new CANNON.Body({ mass: 1 });
boxBody.addShape(boxShape);
boxBody.position.set(0, 5, 0);
world.addBody(boxBody);

// 创建对应的 Three.js 网格
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);