这篇文章主要介绍“怎么使用Three.js物理引擎Cannon.js创建简单应用程序”,在日常操作中,相信很多人在怎么使用Three.js物理引擎Cannon.js创建简单应用程序问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使用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/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();