Three cannon-es 基础使用示例详解

更新时间：2024年05月21日 11:45:13 作者：灵魂清零

Cannon.js可以在多种浏览器上运行,并且支持移动设备和桌面设备,这使得开发者可以轻松地在各种平台上开发和运行物理模拟应用程序,这篇文章主要介绍了Three cannon-es 基础使用,需要的朋友可以参考下

Cannon.js的特点

1、轻量级和高性能：Cannon.js被设计为一个快速而轻便的物理引擎，代码简洁且易于理解。

2、真实的物理模拟：Cannon.js提供了一套完整的3D物理模拟功能，包括刚体碰撞、力学模拟和约束等。这使得开发者可以模拟真实世界中的物理效果。

3、灵活的约束系统：Cannon.js的约束系统非常灵活，并且支持各种类型的约束，如距离约束、弹簧约束、旋转约束等。开发者可以根据需要创建各种类型的约束。

4、基于WebGL：Cannon.js与WebGL技术结合使用，可以轻松实现在浏览器中展示3D物理效果，并且与其他WebGL应用程序进行集成。

5、跨平台兼容性：Cannon.js可以在多种浏览器上运行，并且支持移动设备和桌面设备。这使得开发者可以轻松地在各种平台上开发和运行物理模拟应用程序。

cannon-es安装和引入

可以通过npm命令行安装cannon.js模块。

npm install --save cannon-es

在html和js文件中分别引入 cannon-es，three 和 three/jsm 是引入three中的实例的

<script type="importmap">
    {
      "imports": {
        "three": "../js/three.module.js",
        "three/jsm/": "../js/jsm/",
        "cannon-es": "../node_modules/cannon-es/dist/cannon-es.js"
      }
    }
</script>

在js中全局引入

import * as Cannon from 'cannon-es'

初始工作

创建我们的3D环境，引入3D 实例。

import * as THREE from 'three'
import * as Cannon from 'cannon-es'
import { OrbitControls } from '../../js/jsm/controls/OrbitControls.js'
// 目标：物理引擎 common-es 使用
// 1. 下载引入 cannon-es 包
// 2. 准备球体，地面，灯光和阴影
// 3. 基于 cannon 创建物理世界，创建物理世界的小球（图形+材质）
// 4. 在渲染循环中更新物理世界内的球体运动轨迹，并影响到 3D 物体（核心思想）
let scene, camera, renderer, controls, ball, floor, world, sphereBody
function init() {
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(0, 0, 30)
    renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.querySelector('#app').appendChild(renderer.domElement)
    renderer.shadowMap.enabled = true
    controls = new OrbitControls(camera, renderer.domElement)
    const axesHelper = new THREE.AxesHelper(5)
    scene.add(axesHelper)
}

一、创建准备球体。网格模型表示一个物体，需要通过几何体Geometry定义Mesh的几何外形，对于Body同样道理，你需要设置物体Body的几何形状。CannonJS定义几何体形状的API有很多种，比如比如长方体Box、球体Sphere等等

因为在场景中已经有了一个球体，现在我们需要在 Cannon.js 的 world 中也创建一个球体。我们需要使用其 Body 类，它可以自由落体并和其他 body 进行碰撞。在创建 body 之前，我们要先定义一个 shape。

//创建屋里小球
const sphereShape = new Cannon.Sphere(1)
// 创建物理小球材质
const sphereMaterial = new Cannon.Material();

二、通过Cannon.World类创建一个物理世界。定义物理世界的物理属性，比如设置重力加速度。重力加速度的属性gravity类似body的位置，是一个三维向量Vec3。重力加速度x、y、z分量值，实际开发根据自己项目和坐标系设置即可，咱们假设小球所在的场景，y轴竖直向上，这样重力就速度就是y方向负方向。

world = new Cannon.World({
   // 自由落体加速度
   gravity: new Cannon.Vec3(0, -9.8, 0)
})

三、使用方法.addBody()把物体添加到物理世界，物理球body添加到物理世界中，这样body就会受到物理世界加速度的影响World。

// 创建物理世界
    sphereBody = new Cannon.Body({
        shape: sphereShape,  // 物体形状
        material: sphereMaterial, // 物位材质
        position: new Cannon.Vec3(0,0,0,),
        mass: 1
    })
    // 把物理小球加入到物理世界
    world.addBody(sphereBody)

四、创建一个地面，这样就可以作为球体自由落体的参照物。

floor = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshStandardMaterial({color: 0xffff00,}));
    floor.position.set(0, -10, 0);
    floor.rotation.set(-Math.PI/2, 0, 0);
    floor.receiveShadow = true;

五、所有的实例和物体都是离不开光照的，没有光，所有的都是看不到的，所以我们是需要添加光照的。我这里就添加的环境光和灯光。

//环境光
const ambientLingth = new THREE.AmbientLight(0xffffff, 1)
//灯光
const directionLight = new THREE.DirectionalLight(0xffffff, 1)
directionLight.position.set(0, 15, 0)
directionLight.castShadow = true

六、我们需要把我们的球体、地面、环境光、灯光都添加到场景中去。

scene.add(ball)
scene.add(floor)
scene.add(ambientLingth)
scene.add(directionLight)

七、在渲染循环中更新物理世界内的球体运动轨迹，并影响到 3D 物体（核心思想）

const clock = new THREE.Clock()
function renderLoop() {
    // 4. 在渲染循环中更新物理世界内的球体运动轨迹，并影响到 3D 物体（核心思想）
    const time = clock.getDelta()
    // 物理世界不断渲染
    // 参数1：固定步长，间隔多久重绘物理世界
    // 参数2：自上次调用后要经过多长时间
    world.step(1 / 160, time)
    // 把物理世界小球最新位置更新给 3D 物体小球位置
    ball.position.copy(sphereBody.position)
    renderer.render(scene, camera)
    requestAnimationFrame(renderLoop)
}

完整代码和效果图

import * as THREE from 'three'
import * as Cannon from 'cannon-es'
import { OrbitControls } from '../../js/jsm/controls/OrbitControls.js'
// 目标：物理引擎 common-es 使用
// 1. 下载引入 cannon-es 包
// 2. 准备球体，地面，灯光和阴影
// 3. 基于 cannon 创建物理世界，创建物理世界的小球（图形+材质）
// 4. 在渲染循环中更新物理世界内的球体运动轨迹，并影响到 3D 物体（核心思想）
let scene, camera, renderer, controls, ball, floor, world, sphereBody
function init() {
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(0, 0, 30)
    renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.querySelector('#app').appendChild(renderer.domElement)
    renderer.shadowMap.enabled = true
    controls = new OrbitControls(camera, renderer.domElement)
    const axesHelper = new THREE.AxesHelper(5)
    scene.add(axesHelper)
}
const clock = new THREE.Clock()
function renderLoop() {
    // 4. 在渲染循环中更新物理世界内的球体运动轨迹，并影响到 3D 物体（核心思想）
    const time = clock.getDelta()
    // 物理世界不断渲染
    // 参数1：固定步长，间隔多久重绘物理世界
    // 参数2：自上次调用后要经过多长时间
    world.step(1 / 160, time)
    // 把物理世界小球最新位置更新给 3D 物体小球位置
    ball.position.copy(sphereBody.position)
    renderer.render(scene, camera)
    requestAnimationFrame(renderLoop)
}
// 2. 准备球体，地面，灯光和阴影
function createBase () {
    // 球体
    ball = new THREE.Mesh(new THREE.SphereGeometry(1,32, 16), new THREE.MeshStandardMaterial({color: 0xffff00,}));
    ball.castShadow = true
    // 地面
    floor = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshStandardMaterial({color: 0xffff00,}));
    floor.position.set(0, -10, 0);
    floor.rotation.set(-Math.PI/2, 0, 0);
    floor.receiveShadow = true;
    //环境光
    const ambientLingth = new THREE.AmbientLight(0xffffff, 1)
    //灯光
    const directionLight = new THREE.DirectionalLight(0xffffff, 1)
    directionLight.position.set(0, 15, 0)
    directionLight.castShadow = true
    scene.add(ball)
    scene.add(floor)
    scene.add(ambientLingth)
    scene.add(directionLight)
}
// 3. 基于 cannon 创建物理世界
function createWorld () {
    world = new Cannon.World({
        // 自由落体加速度
        gravity: new Cannon.Vec3(0, -9.8, 0)
    })
    //创建屋里小球
    const sphereShape = new Cannon.Sphere(1)
    // 创建物理小球材质
    const sphereMaterial = new Cannon.Material();
    // 创建物理世界
    sphereBody = new Cannon.Body({
        shape: sphereShape,  // 物体形状
        material: sphereMaterial, // 物位材质
        position: new Cannon.Vec3(0,0,0,),
        mass: 1
    })
    // 把物理小球加入到物理世界
    world.addBody(sphereBody)
}
init()
createBase()
createWorld()
setTimeout(() => {
    renderLoop()
},1000)

到此这篇关于Three cannon-es 基础使用的文章就介绍到这了,更多相关Three cannon-es 使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

问题解析有JSDoc还需要TypeScript吗
这篇文章主要介绍了有JSDoc还需要TypeScript的问题示例解析,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
Document.body.scrollTop的值总为零的快速解决办法
这篇文章主要介绍了Document.body.scrollTop的值总为零的解决方法的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
利用jsonp解决js读取本地json跨域的问题
这篇文章主要给大家介绍了关于利用jsonp解决js读取本地json跨域的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
基于Three.js实现3D玉兔效果的示例代码
2022年中秋佳节即将来临，中秋节是我们国家的传统节日。而中秋与玉兔又往往会联系在一起，本文将用Threejs做一只会动的3D玉兔，感兴趣的可以了解一下
2022-08-08
JavaScript实现二维坐标点排序效果
这篇文章主要为大家详细介绍了JavaScript实现二维坐标点排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
js鼠标跟随运动效果
这篇文章主要为大家详细介绍了js鼠标跟随运动效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
JavaScript实现淘宝网图片的局部放大功能
这篇文章主要为大家详细介绍了JavaScript实现淘宝网图片的局部放大功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
JavaScript中的splice方法用法详解
JavaScript中的splice主要用来对js中的数组进行操作，包括删除，添加，替换等。这篇文章主要介绍了JavaScript中的splice方法用法详解的相关资料,需要的朋友可以参考下
2016-07-07
typescript路径别名问题详解与前世今生的故事
我们都知道只有正确引用路径,Typescript才不会提示报错,这篇文章主要给大家介绍了关于typescript路径别名问题详解与前世今生的故事,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
Javascript实现简易天数计算器
这篇文章主要为大家详细介绍了Javascript实现简易天数计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05

Three cannon-es 基础使用示例详解

目录

Cannon.js的特点

cannon-es安装和引入

初始工作

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具