相关文章推荐
温暖的饭卡  ·  Django Rest Framework ...·  2 年前    · 
潇洒的硬币  ·  MySQL关于日期为零值的处理 - 掘金·  2 年前    · 
考研的大脸猫  ·  array boundary ...·  2 年前    · 
Code  ›  通义灵码下载安装指南_智能编码助手_AI编程_云效(Apsara Devops)-阿里云帮助中心
https://help.aliyun.com/document_detail/2590614.html
机灵的绿茶
1 年前

参考资料： Three.js中文网

物理引擎CannonJS简介和引入

JavaScript物理模拟引擎还是比较多的，比如Ammo.js、Physi.js、Cannon.js，这些引擎虽然语法细节有差异，但是在3D应用中开发思路是相似的。

本课程就以Cannon.js为例给大家讲解 three.js 和 物理引擎 的结合。

github资源cannon.js

github资源 cannon.js ：https://github.com/schteppe/cannon.js

cannon.js 文档 ：可以在本地静态服务器打开 cannon.js\docs\index.html 预览Canonjs引擎的文档。

cannon.js 案例 ： cannon.js\examples\ 和 \demos\ 目录下可以看到一些cannonjs和three.js结合的一些小例子。

github资源cannon-es

cannon-es 对 cannon.js 进行了重写，补充支持了ES6和Typescript语法。

不过除了es语法版本问题，也要注意一点就是 cannon-es 也改变了 cannon.js 部分API写法，这一点提醒大家，你查看别人文档或代码一定注意，别人用的 cannon.js 还是 cannon-es 。

github资源 cannon-es ：https://github.com/dreammonkey/cannon-es

cannon-es在线文档 ：https://pmndrs.github.io/cannon-es/docs/index.html

cannon-es在线案例 ：https://pmndrs.github.io/cannon-es/

cannon-es 案例 ： cannon-es\examples\ 目录下可以看到一些cannonjs和three.js结合的一些小例子。

本课程使用 cannon-es 给大家讲解CannonJS的使用。

cannon-es安装和引入

在工程化开发的时候可以通过npm命令行安装cannon.js模块。 

npm install --save cannon-es

// 某个API
import {World, Vec3} from "cannon-es";
// 全部API一次性引入
import * as CANNON from "cannon-es";

咱们课件中是在.html文件中直接引入的cannon-es，实际开发，用上面npm安装方式引入即可。
 

 <script type="importmap">
			"imports": {
        		"cannon-es": "../cannon-es/dist/cannon-es.js"
	</script>
  <script type="module">
    import * as CANNON from 'cannon-es';
    // 测试是否引入成功
    console.log('CANNON', CANNON.World); 
    import { World } from 'cannon-es';
    console.log('World', World);
  </script>

CannonJS自由落体计算
 

正式使用物理引擎CannonJS与Threejs结合之前，先用CannonJS模拟一个小球自由落体运动的物理计算。
 

物理引擎概念解释
 

所谓物理引擎，就是通过代码模拟物理世界。举个简单例子，比如你初高中都学过物理学，其中力、速度、加速度、位移都是比较常见的物理量，咱们通过CannonJS等物理引擎，都可以辅助你计算生活中物体的速度、位移，比如计算一个小球在地球重力的作用下，下落的速度和位置。
 

引入物理引擎cannon-es
 

上节课给大家讲解过，怎么引入物理引擎cannon-es。
 

import * as CANNON from "cannon-es";

碰撞体Body
 

通过CANNON.Body类，可以创建一个用于物体物理模拟计算，比如用Body表示一个球、一个箱子、一张桌子，你可以计算Body的位置、速度等物理量。
 

你可以也把Body称为碰撞体collider。
 

const body = new CANNON.Body();

设置Body的物理属性
 

设置Body的一些物理属性，比如质量mass
 

const body = new CANNON.Body({
    mass: 0.3, // 碰撞体质量0.3kg

设置物体body的位置，CannonJS的三维向量Vec3和threejs名称不同，不过使用方式相似。
 

const body = new CANNON.Body({
    mass: 0.3,
     // 碰撞体的三维空间中位置
    position: new CANNON.Vec3(0, 100, 0)

碰撞体Body几何形状
 

第一次接触Body，你可以类比threejs的Mesh去联想记忆，网格模型表示一个物体，需要通过几何体Geometry定义Mesh的几何外形，对于Body同样道理，你需要设置物体Body的几何形状。
 

CannonJS定义几何体形状的API有很多种，比如比如长方体Box、球体Sphere等等，本节课先给大家介绍球体Sphere。
 

// 1m半径球体
const bodyShape = new CANNON.Sphere(1);
// 可以把Body称为碰撞体,用来模拟生活中的物体
const body = new CANNON.Body({
    mass: 0.3, 
    position: new CANNON.Vec3(0, 100, 0),
    shape: bodyShape,//碰撞体的几何体形状

CANNON.World创建一个物理世界
 

通过CANNON.World类创建一个物理世界。
 

// CANNON.World创建物理世界对象
const world = new CANNON.World();

定义物理世界的物理属性，比如设置重力加速度。
 

重力加速度的属性gravity类似body的位置，是一个三维向量Vec3。
 

重力加速度x、y、z分量值，实际开发根据自己项目和坐标系设置即可，咱们假设小球所在的场景，y轴竖直向上，这样重力就速度就是y方向负方向。
 

const world = new CANNON.World();
// 设置物理世界重力加速度
world.gravity.set(0, -9.8, 0); //单位：m/s²

.addBody()把物体添加到物理世界
 

物理球body添加到物理世界中，这样body就会受到物理世界加速度的影响World。
 

const world = new CANNON.World();
world.addBody(body);

world.step()物理世界更新计算
 

最后不要忘记周期性执行world.step()方法，world.step()方法第一个参数表示固定时间步长，一般可以设置为1/60秒，用于近似计算。
 

function render() {
    world.step(1/60);//更新物理计算
    requestAnimationFrame(render);
render()

//固定的时间步长1/60秒
const fixedTimeStep = 1/60;
function render() {
    world.step(fixedTimeStep);

浏览器控制台查看计算结果
 

你可以查看物体对象body的位置.position、速度.velocity属性。
 

function render() {
    console.log('球位置', body.position);
    console.log('球速度', body.velocity);
    console.log('y方向球位置', body.position.y);
    world.step(1/60);//更新物理计算
    requestAnimationFrame(render);

浏览器控制辅助开发
 

除了查看文档，你还可以通过浏览器控制台，查看CannonJS某个类的属性或方法。
 

Body具有位置.position、重量.mass、几何形状.shapes等属性
 

const body = new CANNON.Body();
console.log('body', body);

const body = new CANNON.Body({
    mass: 0.3, 
    position: new CANNON.Vec3(0, 100, 0),
    shape: new CANNON.Sphere(1),

比如body.position位置属性的属性值是三维向量Vec3，Vec3具有x、y、z属性和set等多个方法。
 

const body = new CANNON.Body();
console.log('body.position', body.position);

语法总结：访问或设置Body属性
 

通过函数选项设置body对象
 

const body = new CANNON.Body({
    mass: 0.3, 
    position: new CANNON.Vec3(0, 100, 0),
    shape: new CANNON.Sphere(0.1),

部分属性也可以直接访问设置。
 

const body = new CANNON.Body();
body.mass = 0.3;
body.position = new CANNON.Vec3(0, 100, 0);

body没有.shape属性，而是.shapes属性，Body类提供了方法.addShape()设置几何体，执行.addShape()方法会改变.shapes属性。
 

const body = new CANNON.Body();
body.addShape(new CANNON.Sphere(1));

练习-threejs可视化cannon计算结果
 

本节课是一个练习题，就是用threejs把cannonjs计算的小球位置可视化表示出来。
 

  • CannonJS：负责物理计算，比如计算出来一个小球的下落位置
  • three.js：负责可视化渲染，比如用Mesh渲染一个下落的小球视觉效果
 

一个负责物理模拟计算，一个负责3D场景的渲染
 

知识点回顾
 

参考上节课知识点，创建一个body表示小球，与threejs的网格小球mesh对应。
 

const world = new CANNON.World();
// 设置物理世界重力加速度
world.gravity.set(0, -9.8, 0);
// 物理小球：对应threejs的网格小球
const body = new CANNON.Body({
    mass: 0.3,//碰撞体质量
    shape:new CANNON.Sphere(1),
});
body.position.y = 100;
world.addBody(body);
// 网格小球
const geometry = new THREE.SphereGeometry(1);
const material = new THREE.MeshLambertMaterial({
    color: 0x00ffff,
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.y = 100;

渲染循环更新小球位置
 

执行world.step()会更新计算物理小球body的下落位置，这时候如果你想看到threejs小球Mesh下落动画，就需要把body位置同步到mesh上面，非常简单，直接复制即可mesh.position.copy(body.position)。
 

const fixedTimeStep = 1/60;
// 渲染循环
function render() {
    world.step(fixedTimeStep);
    // 渲染循环中，同步物理球body与网格球mesh的位置
    mesh.position.copy(body.position);
    renderer.render(scene, camera);
    requestAnimationFrame(render);
render();

调节物理世界加速度
 

你可以尝试改变物理世界的重力加速度，对比不同加速度，threejs小球Mesh下落动画视觉效果差异。
 

world.gravity.set(0, -9.8, 0);

world.gravity.set(0, -50, 0);

你实际设置，重力加速度不一定就是设置为9.8，也可以根据需要设置不同的重力加速度大小，开发游戏或元宇宙项目，物理效果追求的是感知正确，不是物理正确，所谓感知正确，就是你的眼睛看着正常就行，并不一定非要与现实100%一致，cannonjs一般就是近似计算位置、速度。当然咱们这节课还没有结合threejs，大家看不到视觉效果，后面咱们都会结合threejs网格Mesh给大家演示。

				
剖析three.js案例中物理引擎Ammo.js的使用方法，其中包含运动、碰撞、检测、自由落体、碰撞器、冻结、自定义更新等功能，有大量代码通过链接方式转到gitee，可以根据代码对照使用
主要剖析的是threejs中提供的ammo案例，相对于原本案例，本篇文章精简了一些代码，提取了一些方法，新增了一些可配置参数，并结合我上一篇文章three.js——镜头跟踪  做了一个小Demo。
先看一下效...

启动网站时，您需要在代码中已经包含three.js和cannon.js以及JS3D库
< script src =' path-to-threejs/three.js ' > </ script >
< script src =' path-to-cannonjs/cannon.js ' > </ script >
< script src =' path-to-JS3D/JS3D.js ' > </ script >
 并且拥有所需的所有库，可以非常容易地添加额外的库，如示例文件夹中所示。
 var world = new JS3D . World ( ) ;
var animate = function ( ) {
  requestAnimationFrame ( animate ) ;
  world . up
				
我们可以利用数学函数和一些解决方案来实现自己的物理效果，但是如果需求更加真实的物理效果，像是物体张力、摩擦力、拉伸、反弹等真实物理效果，最好使用外部库
我们会创建一个Three.js世界和一个Physics物理世界，虽然我们看不见后者但它是真实存在的，每当我们往Three.js世界添加对象时，相应的物理世界也会添加相同对象。物理世界在每一帧更新时都会相应更新到Three.js世界中。
例如物理世界中的球体在地板上进行真实弹跳效果时，我们会取其每一帧更新后的坐标并将坐标应用到Three.js世界中的对应

				
今天郭先生说一说cannon.js物理引擎之Heightfield高度场，学过场论的朋友都知道物理学中把某个物理量在空间的一个区域内的分布称为场，高度场就是与高度相关的场，而cannon.js物理引擎的Heightfield的高度就是关于两个变量的函数，可以表达为HEIGHT(i,j)。当然知不知道场论不耽误我们学习Heightfield，下面就是一个由Heightfield生成的高度场，在线案例请点击博客原文。我们来说一说它的用法。
Heightfield的用法
说用法之前我们不妨看看他的API，文档

				
我在UCF的计算机图形学课程中使用three.js和Physijs制作的游戏。 玩
目标：使用尽可能少的炮弹击倒平台上的所有障碍物。
 控制：用大炮对准大炮，并用鼠标左键射击。
 Woodgod从字体
来自砖和木材
在 Three.js 中首先需要创建一个三维空间，我们称之为场景。
场景可以想象成是一个容器，里面存放着所有渲染的物体和使用的光源。
let scene = new THREE.Scene()
Axes 坐标轴
Three.js 采用的是右手坐标系，拇指、食指、中指分别表示 X、Y、Z 轴的方向。
Camera 摄像机
摄像机就相当于我们的双眼，决定了能够在场景中的所见所得。
Three.js 中提供
 
推荐文章
温暖的饭卡  ·  Django Rest Framework 可自定义读写 Serializer Field实现（附代码） - 知乎
2 年前
潇洒的硬币  ·  MySQL关于日期为零值的处理 - 掘金
2 年前
考研的大脸猫  ·  array boundary exceeded error in powerbuilder-掘金
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号