文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-12-09 18:00

关注

引言

在开始之前,我们还是要解释下什么是 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 更新物理引擎世界的物体,随后将 sphereBodyposition 赋值给 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的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯