Three.js物理引擎Cannon.js创建简单应用程序

创建 Three.js 物理引擎 Cannon.js 应用程序的步骤如下：

准备工作

在开始之前，需要确保在您的页面中包含 Three.js 和 Cannon.js 库。可以通过以下方式进行添加：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>

注意：前往这两个库的官方网站查找最新版本。

创建场景和相机

首先，需要在显示器上创建一个 Three.js 场景。在这个场景中，需要包含一个渲染器和一个 Three.js 相机。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 10;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

构建物理世界

在 Three.js 应用程序中，物理世界是由 Cannon.js 引擎维护的。可以通过创建一个 CANNON.World 对象来实现这一点。

const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
world.broadphase = new CANNON.NaiveBroadphase();

物理世界中的重力可以设置为任何合适的值，这里选择设为 9.82，模拟地球引力。

创建物体

需要在 Three.js 场景和 Cannon.js 物理世界之间创建联系。可以通过创建一个物理形状和刚体来实现这一点。

创建球体

const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphereMesh);

const sphereShape = new CANNON.Sphere(1);
const sphereBody = new CANNON.Body({mass: 5, shape: sphereShape});
sphereBody.position.set(0, 5, 0);
world.addBody(sphereBody);

创建盒子

const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
const boxMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00});
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(boxMesh);

const boxShape = new CANNON.Box(new CANNON.Vec3(1, 1, 1));
const boxBody = new CANNON.Body({mass: 10, shape: boxShape});
boxBody.position.set(0, 0, 0);
world.addBody(boxBody);

渲染场景

最后一步是在渲染循环中更新物理引擎和 Three.js 场景。可以使用 requestAnimationFrame 函数重复调用渲染循环函数。

function animate() {
    requestAnimationFrame(animate);

    world.step(1 / 60);

    sphereMesh.position.copy(sphereBody.position);
    sphereMesh.quaternion.copy(sphereBody.quaternion);
    boxMesh.position.copy(boxBody.position);
    boxMesh.quaternion.copy(boxBody.quaternion);

    renderer.render(scene, camera);
}

animate();

这两个示例分别创建了球体和盒子。可以通过这些示例来创建更复杂的物理应用程序和形状。