Three.js物理引擎Cannon.js創(chuàng)建簡(jiǎn)單應(yīng)用程序

更新時(shí)間：2023年04月24日 15:12:08 作者：Data_Adventure

這篇文章主要為大家介紹了Three.js物理引擎Cannon.js創(chuàng)建簡(jiǎn)單應(yīng)用程序詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

Three.js 和 Cannon.js 是兩個(gè)非常流行的 JavaScript 庫(kù)，用于創(chuàng)建 3D 游戲和交互式應(yīng)用程序。Three.js 是一個(gè)用于創(chuàng)建 3D 圖形的庫(kù)，而 Cannon.js 是一個(gè)用于物理模擬的庫(kù)。在本文中，我們將探討如何使用這兩個(gè)庫(kù)來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的物理模擬應(yīng)用程序。

在 HTML 文件中引入 Three.js 和 Cannon.js 庫(kù)

首先，我們需要在 HTML 文件中引入 Three.js 和 Cannon.js 庫(kù)。我們可以使用以下代碼：

<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>

接下來(lái)，我們需要?jiǎng)?chuàng)建一個(gè) Three.js 場(chǎng)景和一個(gè) Cannon.js 物理世界。我們可以使用以下代碼：

// 創(chuàng)建 Three.js 場(chǎng)景
const scene = new THREE.Scene();
// 創(chuàng)建 Cannon.js 物理世界
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);

創(chuàng)建一些 Three.js 對(duì)象并將它們添加到場(chǎng)景中

現(xiàn)在，我們可以創(chuàng)建一些 Three.js 對(duì)象并將它們添加到場(chǎng)景中。

例如，我們可以創(chuàng)建一個(gè)立方體并將其添加到場(chǎng)景中：

// 創(chuàng)建一個(gè)立方體
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
// 將立方體添加到場(chǎng)景中
scene.add(cube);

創(chuàng)建一個(gè) Cannon.js 物體

接下來(lái)，我們需要?jiǎng)?chuàng)建一個(gè) Cannon.js 物體，并將其與 Three.js 對(duì)象關(guān)聯(lián)起來(lái)。

我們可以使用以下代碼：

// 創(chuàng)建 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 對(duì)象關(guān)聯(lián)起來(lái)
const cubeBody = new THREE.Object3D();
cubeBody.position.copy(cube.position);
scene.add(cubeBody);
world.addBody(body);

在每一幀更新 Three.js 對(duì)象的位置

現(xiàn)在，我們可以在每一幀更新 Three.js 對(duì)象的位置，以反映 Cannon.js 物理世界中的物體運(yùn)動(dòng)。

我們可以使用以下代碼：

function animate() {
  requestAnimationFrame(animate);
  // 更新 Cannon.js 物理世界
  world.step(1 / 60);
  // 更新 Three.js 對(duì)象的位置
  cube.position.copy(body.position);
  cube.quaternion.copy(body.quaternion);
  // 渲染場(chǎng)景
  renderer.render(scene, camera);
}
animate();

現(xiàn)在，我們已經(jīng)成功地創(chuàng)建了一個(gè)簡(jiǎn)單的物理模擬應(yīng)用程序，使用了 Three.js 和 Cannon.js 庫(kù)。我們可以通過(guò)添加更多的 Three.js 對(duì)象和 Cannon.js 物體來(lái)擴(kuò)展這個(gè)應(yīng)用程序，以創(chuàng)建更復(fù)雜的物理模擬場(chǎng)景。

完整的示例

下面是一個(gè)完整的示例，一個(gè)紅色小球從高空跌落，3秒鐘出現(xiàn)一個(gè)。

// 創(chuàng)建場(chǎng)景、相機(jī)和渲染器
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);
// 創(chuàng)建 Cannon.js 物理世界
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
// 創(chuàng)建地面
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);
// 將地面添加到場(chǎng)景中
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 對(duì)象關(guān)聯(lián)起來(lái)
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() {
  // 創(chuàng)建小球
  const radius = 5;
  const segments = 32;
  const geometry = new THREE.SphereGeometry(radius, segments, segments);
  // phhong材質(zhì)
  const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
  const ball = new THREE.Mesh(geometry, material);
  // 設(shè)置小球的初始位置
  // x z 位置隨機(jī)
  const x = Math.random() * 4 - 2;
  const z = Math.random() * 4 - 2;
  ball.position.set(x, 25, z);
  // 將小球添加到場(chǎng)景中
  scene.add(ball);
  // 創(chuàng)建 Cannon.js 物體
  const shape = new CANNON.Sphere(radius);
  const body = new CANNON.Body({ mass: 1 });
  body.addShape(shape);
  // 設(shè)置小球的初始位置和速度
  body.position.set(x, 25, z);
  body.velocity.set(0, -9.82, 0);
  // 將 Cannon.js 物體與 Three.js 對(duì)象關(guān)聯(lián)起來(lái)
  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 對(duì)象的位置
    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創(chuàng)建簡(jiǎn)單應(yīng)用程序的詳細(xì)內(nèi)容，更多關(guān)于Three.js物理引擎Cannon.js的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: