Three.js引入Cannon.js及使用示例詳解

更新時間：2022年12月09日 17:12:47 作者：隨便起一個名字吧

這篇文章主要為大家介紹了Three.js引入Cannon.js及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

在開始之前，我們還是要解釋下什么是 Cannon.js 以及它的作用。

Cannon.js 是一個 3D 物理引擎，通過為物體賦予真實的物理屬性的方式來計算運動、旋轉(zhuǎn)和碰撞檢測。Cannon.js 相較于其他常見的物理引擎來說，比較輕量級而且完全通過 JavaScript 來實現(xiàn)。

Cannon.js 的官方文檔地址為 schteppe.github.io/cannon.js/ ，從官方介紹中也可以看到很多有趣的例子，如下所示：

本篇，我們就嘗試用 Three.js + Cannon.js 做一個簡單的示例。

首先我們通過 Three.js 創(chuàng)建一個球及一個平面，前面已經(jīng)介紹過很多關于 Three.js 如何使用，這里就不多做介紹了

大體代碼及效果

const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(1, 20, 20),
    new THREE.MeshStandardMaterial()
);
scene.add(sphere);
const floor = new THREE.Mesh(
    new THREE.PlaneGeometry(20, 20),
    new THREE.MeshStandardMaterial()
);
floor.position.y = -5;
floor.rotation.x = -Math.PI / 2;
scene.add(floor);

在開始正式使用物理引擎之前，我們需要先弄清一些概念，Three.js 是渲染引擎，Cannon.js 是物理引擎。渲染引擎負責畫 UI，而物理引擎負責運動。

我們通過物理引擎打造一個和當前 UI 一樣的世界，然后讓引擎運動起來，然后將運動物體的坐標實時反映到渲染引擎中，這樣使得物理引擎和渲染引擎協(xié)同工作。

Cannon.js 打造當前 UI

所以第一步，利用 Cannon.js 打造和當前 UI 一樣的物理世界

import * as CANNON from "cannon-es";
// 創(chuàng)建物理世界
const world = new CANNON.World();
world.gravity.set(0, -9.8, 0);
// 創(chuàng)建物理小球形狀
const sphereShape = new CANNON.Sphere(1);
// 設置物體材質(zhì)
const sphereWorldMaterial = new CANNON.Material();
// 創(chuàng)建物理世界的物體
const sphereBody = new CANNON.Body({
    shape: sphereShape,
    // 位置
    position: new CANNON.Vec3(0, 0, 0),
    // 小球質(zhì)量
    mass: 1,
    // 物體材質(zhì)
    material: sphereWorldMaterial,
});
// 將物體添加至物理世界
world.addBody(sphereBody);
// 創(chuàng)建地面
const floorShape = new CANNON.Plane();
const floorBody = new CANNON.Body();
// 當質(zhì)量為0時，使得物體保持不動
floorBody.mass = 0;
floorBody.addShape(floorShape);
// 位置
floorBody.position.set(0, -5, 0);
// 旋轉(zhuǎn)
floorBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
world.addBody(floorBody);

如此便打造了一個和 UI 一樣的物理世界，代碼很簡單，相信通過注釋就能明白做了什么事情。

下面就是讓物理引擎“動起來”，并將物體的坐標同步賦值給渲染引擎中的物體。

從文檔中可以看到，step 就是我們想要的方法，利用 step 更新物理引擎世界的物體，隨后將 sphereBody 的 position 賦值給 Three.js 中的 sphere。

const clock = new THREE.Clock();
function render() {
    // 更新物理引擎世界的物體
    world.step(1 / 60, clock.getDelta());
    sphere.position.copy(sphereBody.position);
    controls.update();
    renderer.render(scene, camera);
    // 渲染下一幀的時候就會調(diào)用 render 函數(shù)
    requestAnimationFrame(render);
}
render();

如此便實現(xiàn)了 Three.js 和 Cannon.js 的聯(lián)動，最終效果如下圖所示：