正文
Three.js 和 Cannon.js 是两个非常流行的 JavaScript 库，用于创建 3D 游戏和交互式应用程序。Three.js 是一个用于创建 3D 图形的库，而 Cannon.js 是一个用于物理模拟的库。在本文中，我们将探讨如何使用这两个库来创建一个简单的物理模拟应用程序。
在 HTML 文件中引入 Three.js 和 Cannon.js 库
首先，我们需要在 HTML 文件中引入 Three.js 和 Cannon.js 库。我们可以使用以下代码：
<script src="https://cdn.jsdelivr.net/npm/three@0.131.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cannon@0.6.2/build/cannon.min.js"></script>
接下来，我们需要创建一个 Three.js 场景和一个 Cannon.js 物理世界。我们可以使用以下代码：
// 创建 Three.js 场景
const scene = new THREE.Scene();
// 创建 Cannon.js 物理世界
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
创建一些 Three.js 对象并将它们添加到场景中
现在，我们可以创建一些 Three.js 对象并将它们添加到场景中。
例如，我们可以创建一个立方体并将其添加到场景中：
// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
// 将立方体添加到场景中
scene.add(cube);
创建一个 Cannon.js 物体
接下来，我们需要创建一个 Cannon.js 物体，并将其与 Three.js 对象关联起来。
我们可以使用以下代码：
// 创建 Cannon.js 物体
const shape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5));
const body = new CANNON.Body({ mass: 1 });
body.addShape(shape);
// 将 Cannon.js 物体与 Three.js 对象关联起来
const cubeBody = new THREE.Object3D();
cubeBody.position.copy(cube.position);
scene.add(cubeBody);
world.addBody(body);
在每一帧更新 Three.js 对象的位置
现在，我们可以在每一帧更新 Three.js 对象的位置，以反映 Cannon.js 物理世界中的物体运动。
我们可以使用以下代码：
function animate() {
requestAnimationFrame(animate);
// 更新 Cannon.js 物理世界
world.step(1 / 60);
// 更新 Three.js 对象的位置
cube.position.copy(body.position);
cube.quaternion.copy(body.quaternion);
// 渲染场景
renderer.render(scene, camera);
}
animate();
现在，我们已经成功地创建了一个简单的物理模拟应用程序，使用了 Three.js 和 Cannon.js 库。我们可以通过添加更多的 Three.js 对象和 Cannon.js 物体来扩展这个应用程序，以创建更复杂的物理模拟场景。
完整的示例
下面是一个完整的示例，一个红色小球从高空跌落，3秒钟出现一个。
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.set(0, 15, 25)
scene.fog = new THREE.Fog(0xffffff, 0, 500);
// 创建 Cannon.js 物理世界
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
// 创建地面
const groundShape = new CANNON.Plane();
const groundBody = new CANNON.Body({ mass: 0 });
groundBody.addShape(groundShape);
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
// 将地面添加到场景中
const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x999999 });
const groundGeometry = new THREE.PlaneGeometry(10000, 10000);
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);
// 将 Cannon.js 物体与 Three.js 对象关联起来
const groundBodyMesh = new THREE.Object3D();
groundBodyMesh.position.copy(ground.position);
scene.add(groundBodyMesh);
world.addBody(groundBody);
// 灯光
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 20, 10);
scene.add(light);
// 半球光
const light2 = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
scene.add(light2);
new THREE.OrbitControls(camera, renderer.domElement);
function createBall() {
// 创建小球
const radius = 5;
const segments = 32;
const geometry = new THREE.SphereGeometry(radius, segments, segments);
// phhong材质
const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const ball = new THREE.Mesh(geometry, material);
// 设置小球的初始位置
// x z 位置随机
const x = Math.random() * 4 - 2;
const z = Math.random() * 4 - 2;
ball.position.set(x, 25, z);
// 将小球添加到场景中
scene.add(ball);
// 创建 Cannon.js 物体
const shape = new CANNON.Sphere(radius);
const body = new CANNON.Body({ mass: 1 });
body.addShape(shape);
// 设置小球的初始位置和速度
body.position.set(x, 25, z);
body.velocity.set(0, -9.82, 0);
// 将 Cannon.js 物体与 Three.js 对象关联起来
const ballBody = new THREE.Object3D();
ballBody.position.copy(ball.position);
scene.add(ballBody);
world.addBody(body);
function animateBall() {
// 更新 Cannon.js 物理世界
world.step(1 / 60);
// 更新 Three.js 对象的位置
ball.position.copy(body.position);
ball.quaternion.copy(body.quaternion);
if (body.position.y < 0) {
scene.remove(ball);
world.removeBody(body);
clearInterval(intervalId);
}
renderer.render(scene, camera);
}
const intervalId = setInterval(animateBall, 1000 / 60);
}
createBall();
setInterval(createBall, 3000);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();以上就是Three.js物理引擎Cannon.js创建简单应用程序的详细内容，更多关于Three.js物理引擎Cannon.js的资料请关注编程网其它相关文章！
