Three.js引入Cannon.js及使用示例详解

目录
  • 引言
    • 大体代码及效果
  • Cannon.js 打造当前 UI

引言

在开始之前，我们还是要解释下什么是 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的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 解决threeJS加载obj gltf模型后颜色太暗的方法

    解决threeJS加载obj gltf模型后颜色太暗的方法

    目录 网上找到的部分解决方法 效果对比 总结 网上找到的部分解决方法 其实通过查找后不难发现网上给出了很多解决方法,但是大部分都无法从根本上解决问题.我之前看到有一篇文章对gltf的解决方法是让gltf增加自发光,相关的设置如下: 使用threeJS的过程中,刚开始总是会遇到些问题,就比如加载obj/gltf等带材质的模型时老是会出现显示效果较暗的问题. object.traverse((child) => { if(child.isMesh) { child.material.emissive

  • three.js镜头追踪的移动效果实例

    目录 达到效果 实现思路 实现难点 1.折现变曲线 2.镜头朝向不受控 3.镜头位置绑定不受控 4.镜头抖动 最终实现方法 方法一:镜头沿线推进 方法二:使用tween动画 方法比较 其他方法 方法一:绘制一条折线+animate镜头推进 方法二:绘制多条线段+animate镜头推进 方法三:绘制多条线段+tween动画变化镜头 方法四:优化方法一,绘制一条折线+animate镜头推进 达到效果 指定一条折线路径,镜头沿着路径向前移动,类似第一视角走在当前路径上. 实现思路 很简单画一条折线路径

  • three.js创造时空裂缝特效实现示例

    目录 效果图 建模 多边形形状 随机多边形 漂浮动画 光照 后期处理 效果图 最近受到轮回系作品<寒蝉鸣泣之时>中时空裂缝场景的启发,我用three.js实现了一个实时渲染的时空裂缝场景.本文将简要地介绍下实现该效果的要点. 以下特效全屏观看效果最佳~ <div id="sketch"></div> <div> <div class="fixed z-5 top-0 left-0 loader-screen w-scree

  • DS-SDK封装ThreeJS的三维场景核心库Viewer

    目录 正文 一.ThreeJS-ES6库引入 二.初始化渲染器 三.初始化相机 四.初始化场景 五.初始化鼠标控制器 六.灯光初始化 七.全局渲染的函数-逐帧获取页面大小 八.全局动画函数 九.销毁页面 正文 viewer核心库的封装主要是针对threejs场景进行初始封装,以便多项目复用.具体细节我就不多写了,网上一大堆,但是我发现网上的例子都比较雷同,所以我的这一篇文档会着重从我做过的项目上遇到的一些问题来具体描写,详细请看第七.第八小节,主要是第一我们真实项目中,其实你的渲染页面不是整个页

  • vue+three.js实现炫酷的3D登陆页面示例详解

    vue+three.js实现炫酷的3D登陆页面示例详解

    目录 前言: Three.js的基础知识 关于场景 关于光源 关于相机(重要) 关于渲染器 完善效果 创建一个左上角的地球 使地球自转 创建星星 使星星运动 创建云以及运动轨迹 使云运动 完成three.js有关效果 结语 前言: 大家好,我是xx传媒严导(xx这两个字请自行脑补) . 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什

  • threejs中使用drawbufferss示例详解

    threejs中使用drawbufferss示例详解

    目录 原因 历程 原生的使用 基本流程 灵光乍现 使用WebGLMultipleRenderTargets 原因 深度剥离实现之后,似乎会使得走样严重起来. 我意识到,这是因为 剥离这个过程,并没有什么讲究,只要是深度小于等于就剔除了,这样很可能就导致了,原本平滑的差值过渡出现了断层,突变. 简单的解决办法就是增顶点数. 一番搜寻weight oit算法的demo,但是只找到了用原生webgl写的,传送门.在费了几个日夜之后,终于看懂了,但是,还要把它用three实现.一般来说,没有使用编译的框

  • Three.js引入Cannon.js及使用示例详解

    目录 引言 大体代码及效果 Cannon.js 打造当前 UI 引言 在开始之前,我们还是要解释下什么是 Cannon.js 以及它的作用. Cannon.js 是一个 3D 物理引擎,通过为物体赋予真实的物理属性的方式来计算运动.旋转和碰撞检测.Cannon.js 相较于其他常见的物理引擎来说,比较轻量级而且完全通过 JavaScript 来实现. Cannon.js 的官方文档地址为 schteppe.github.io/cannon.js/ ,从官方介绍中也可以看到很多有趣的例子,如下所示

  • JS实现简单的下雪特效示例详解

    JS实现简单的下雪特效示例详解

    目录 前言 主要实现代码 HTML代码 JS代码 前言 很多南方的小伙伴可能没怎么见过或者从来没见过下雪,今天我给大家带来一个小Demo,模拟了下雪场景,首先让我们看一下运行效果 可以点击看看在线运行http://haiyong.site/xiaxue 首先看看项目结构,一张雪花图片,一个.html文件和 jquery-1.4.2.js 用到的雪花图片我放在这里了,或者可以直接用我上传到自己网站上的图片地址:http://haiyong.site/wp-content/uploads/2021/

  • Three.js实现雪糕地球的使用示例详解

    Three.js实现雪糕地球的使用示例详解

    目录 前言 ThreeJS 基础——实现转动的球体 ThreeJS 纹理——实现转动的地球 交互式雪糕地球 添加 loading 效果 前言 最近的天气有几分酷热,去实验室的道路也有几分漫长,走着走着,小包感觉灵魂已经被热出窍了.回到实验室,把空调打开,雪糕吃上,静坐了几分钟,才重新感觉到灵魂的滋味,葛优躺在实验室的小床上,思维开始天马行空,世上有一万种方式能让小包凉快,但地球母亲呐,她却日渐炎热,谁能来给她降降温? 躺着躺着,进入了梦乡,小包梦到未来有一天,人类超级发达,可以穿梭时空,但发展的

  • JS实现大数相加大数相乘示例详解

    目录 JS大数相加.大数相乘 一.实现两个大数相加 二.实现两个大数相乘 JS大数相加.大数相乘 JavaScript 只有一种数字类型,可以使用也可以不使用小数点来书写数字. 在 JavaScript 中,数字不分为整数类型和浮点数类型,所有的数字都是浮点数类型.JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字,此格式用 64 位存储数值.其中 0~51存储数字片段,52~62存储指数,63 位存储符号. 来看看 JavaScript 中数字的最大值和最小值:

  • JS实现简单的操作杆旋转示例详解

    目录 一.实现效果 二.组成部分 目标 三.代码实现 1.操作控制 2.dom对象操作类 3.用法 总结与思考 一.实现效果 JS 简单的操作杆旋转实现 首先说明一下,请直接忽略背景图,这里主要实现的是杆旋转控制方向盘旋转. 鼠标移出控制区域,控制球复位 二.组成部分 创建 ballOption.js 文件,用以绑定控制球指定 dom,并初始化相关操作 创建 eleOption.js 文件,用以实现一些频繁的 dom 操作 主要是通过鼠标滑动事件控制“控制球”位置更改及获取以屏幕上方向为0度的角

  • JS实现一个微信录音功能过程示例详解

    目录 功能原型图 拆解需求 评估时间 代码实现 功能原型图 其实就是微信发送语音的功能.没有转文字的功能. 拆解需求 根据原型图可以很容易的得出我们需要做的内容包括下面三个部分: 接入微信的语音SDK 调用微信SDK的API逻辑 界面和交互的实现 其中第一点和第二点属于业务逻辑部分,第三点属于交互逻辑部分.对于业务逻辑和交互逻辑的关系在我的另外一篇文章描述过,我在vue中是这样拆分组件的 从原型图可以分析出如下的流程图: 评估时间 第三事情是评估时间.在接到这个需求的时候,我们需要假设我们在此之

  • node.js中Util模块作用教程示例详解

    目录 从类型判断说起 严格相等 Error First & Promise 调试与输出 从类型判断说起 在 JavaScript 中,进行变量的类型校验是一个非常令人头疼的事,如果只是简单的使用 typeof 会到各种各样的问题. 举几个简单的: console.log(typeof null) // 'object' console.log(typeof new Array) // 'object' console.log(typeof new String) // 'object' 后来,大

  • Node.js实现分片上传断点续传示例详解

    目录 正文 文件的分片与合并 并发控制 使代码可复用 服务端接口实现 正文 大文件上传会消耗大量的时间,而且中途有可能上传失败.这时我们需要前端和后端配合来解决这个问题. 解决步骤: 文件分片,减少每次请求消耗的时间,如果某次请求失败可以单独上传,而不是从头开始 通知服务端合并文件分片 控制并发的请求数量,避免浏览器内存溢出 当因为网络或者其他原因导致某次的请求失败,我们重新发送请求 文件的分片与合并 在JavaScript中,FIle对象是' Blob '对象的子类,该对象包含一个重要的方法s

  • 原生js中运算符及流程控制示例详解

    运算符 算数:+ 加.- 减.* 乘./ 除.% 求模 赋值:=.+=.-=.*=./=.%= 关系:>.<. >=. <=. ==. ===. !=. !== 逻辑:||或.&&与.!否 实例1.求模 window.onload = function(){ alert(0%2) //0 alert(1%2) //1 alert(2%2) //0 } 实例2.隔行变色 <body> <ol> <li>取模:就是求余数</li

  • js闭包和垃圾回收机制示例详解

    前言 闭包和垃圾回收机制常常作为前端学习开发中的难点,也经常在面试中遇到这样的问题,本文记录一下在学习工作中关于这方面的笔记. 正文 1.闭包 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.作为一个JavaScript开发者,理解闭包十分重要. 1.1闭包是什么? 闭包就是一个函数引用另一个函数的变量,内部函数被返回到外部并保存时产生,(内部函数的作用域链AO使用了外层函数的AO) 因为变量被引用着所以不会被回收,因此可以用来封装一个私有

随机推荐