Three.js引入Cannon.js及使用示例詳解
引言
在開始之前,我們還是要解釋下什麼是 Cannon.js 以及它的作用。
Cannon.js 是一個 3D 物理引擎,通過為物體賦予真實的物理屬性的方式來計算運動、旋轉和碰撞檢測。Cannon.js 相較於其他常見的物理引擎來說,比較輕量級而且完全通過 JavaScript 來實現。
Cannon.js 的官方文檔地址為 schteppe.github.io/cannon.js/ ,從官方介紹中也可以看到很多有趣的例子,如下所示:
本篇,我們就嘗試用 Three.js + Cannon.js 做一個簡單的示例。
首先我們通過 Three.js 創建一個球及一個平面,前面已經介紹過很多關於 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 一樣的世界,然後讓引擎運動起來,然後將運動物體的坐標實時反映到渲染引擎中,這樣使得物理引擎和渲染引擎協同工作。
Cannon.js 打造當前 UI
所以第一步,利用 Cannon.js 打造和當前 UI 一樣的物理世界
import * as CANNON from "cannon-es"; // 創建物理世界 const world = new CANNON.World(); world.gravity.set(0, -9.8, 0); // 創建物理小球形狀 const sphereShape = new CANNON.Sphere(1); // 設置物體材質 const sphereWorldMaterial = new CANNON.Material(); // 創建物理世界的物體 const sphereBody = new CANNON.Body({ shape: sphereShape, // 位置 position: new CANNON.Vec3(0, 0, 0), // 小球質量 mass: 1, // 物體材質 material: sphereWorldMaterial, }); // 將物體添加至物理世界 world.addBody(sphereBody); // 創建地面 const floorShape = new CANNON.Plane(); const floorBody = new CANNON.Body(); // 當質量為0時,使得物體保持不動 floorBody.mass = 0; floorBody.addShape(floorShape); // 位置 floorBody.position.set(0, -5, 0); // 旋轉 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); // 渲染下一幀的時候就會調用 render 函數 requestAnimationFrame(render); } render();
如此便實現瞭 Three.js 和 Cannon.js 的聯動,最終效果如下圖所示:
以上就是Three.js引入Cannon.js及使用示例詳解的詳細內容,更多關於Three.js 引入Cannon.js的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- Three.js物理引擎Cannon.js創建簡單應用程序
- three.js簡單實現類似七聖召喚的擲骰子
- Three.js PBR物理渲染屬性及使用介紹
- three.js實現3d全景看房示例
- vue3項目中使用three.js的操作步驟