Three.js物理引擎Cannon.js創建簡單應用程序
正文
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/[email protected]/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- three.js簡單實現類似七聖召喚的擲骰子
- Three.js引入Cannon.js及使用示例詳解
- vue3項目中使用three.js的操作步驟
- three.js實現3d全景看房示例
- Three.js中實現Bloom效果及完整示例