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


1. Heightfield的用法

说用法之前我们不妨看看他的API,文档对于它的说明是 – “高度数据以数组形式给出。这些数据点以给定的距离均匀分布”。构造函数如下。

Heightfield ( data , options )

data是一个Y值数组,将用于构建地形。options是一个配置项,有三个可配置参数。minValue是数据数组中数据点的最小值。如果未给出,将自动计算。maxValue最大值。elementSize是X方向上数据点之间的世界间距。他还有一些属性和方法请大家自行观看,我就不多说了。

高度场Heightfield本质和cannon.js一样还是一种数据的表达形式,想要把它应用到three中仍然需要对应的图形来表达(就像CANNON.Box数据需要THREE.BoxBuferGeometry几何体一样),对应的几何体就是ParametricBufferGeometry,下面我们以一个案例来实际操作一下。

2. Heightfield案例

可以点击案例来观看,下面我们直接上代码。

initCannon() { //这里是生成高度场的代码 var matrix = [];//创建构造高度场的数组 for (var i = 0; i < size; i++) {
        matrix.push([]); for (var j = 0; j < size; j++) { //高度由两个余弦函数叠加形成 var height = Math.cos(i / size * Math.PI * 8) * Math.cos(j / size * Math.PI * 8);
            matrix[i].push(height)
        }
    } var hfShape = new CANNON.Heightfield(matrix, {
        elementSize: 1 //数据点的距离设置为1  }); var hfBody = new CANNON.Body({ mass: 0, material: physicsMaterial}); var q = new CANNON.Quaternion();
    q.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), - Math.PI / 2);
    hfBody.addShape(hfShape, new CANNON.Vec3(-size / 2, 0, size / 2), q);//由于这个高度场是XOY平面第一象限上,所以需要旋转和平移,addShape方法为我们提供了这个功能。  world.addBody(hfBody);
},
initThree() { //使用ParametricBufferGeometry配合Heightfield形成网格 var groundGeom = new THREE.ParametricBufferGeometry((u,v,target) => { var height = Math.cos(u * Math.PI * 8) * Math.cos(v * Math.PI * 8);//这里的方法和生成高度场的方法是一样的,不了解ParametricBufferGeometry几何体的可以参考我之前发的博客。 target.set(u * size - size / 2, height, v * size - size / 2);
    }, size, size)
    let groundMate = new THREE.MeshPhongMaterial({color: 0x666666, side: THREE.DoubleSide});
    groundMesh = new THREE.Mesh(groundGeom, groundMate);
    scene.add(groundMesh);
},

Heightfield学习起来还是很简单的,我们后面的案例可能会用到这个高度场作为地面,作为预备知识先了解一下。下一节我们讲一下RaycastVehicle类。


转载请注明地址:郭先生的博客


three.js cannon.js物理引擎之Heightfield的更多相关文章

  1. 在使用内模块的时候需要先将所需的内置模块进行引入、OS模块在nodejs中OS模块提供了与操作系统相关的属性和方法/......

  2. pixi.js 自定义光标样式

    pixi 介绍Pixi是一个超快的2D渲染引擎,通过Javascript和Html技术创建动画或管理交互式图像,从而......

  3. JS实现公告上线滚动效果

    本文实例为大家分享了JS实现公告上线滚动效果的具体代码,供大家参考,具体内容如下实现的效果如下,新闻公告上下滚动。代......

  4. nodejs中的文件系统

    、目录简介nodejs中的文件系统模块Promise版本的fs文件描述符fs.stat文件状态信息fs的文件读写fs......

  5. Socket.IO基础教程

    什么是Socket.IOSocket.IO是一个库,可用于在浏览器和服务器之间进行实时,双向和基于事件的通信。它包括......

  6. three.js cannon.js物理引擎之Heightfield

    今天郭先生说一说cannon.js物理引擎之Heightfield高度场,学过场论的朋友都知道物理学中把某个物理量在......

  7. Node使用koa2实现一个简单JWT鉴权的方法

    JWT 简介什么是 JWT全称 JSON Web Token , 是目前最流行的跨域认证解决方案。基本的实现是服务端......

  8. 使用nodejs和express搭建http web服务

    目录简介使用nodejs搭建HTTP web服务请求nodejs服务第三方lib请求post获取http请求的正文E......

  9. 在nodejs中创建child process

    目录简介child process异步创建进程同步创建进程在nodejs中创建child process简介node......

  10. nodejs事件和事件循环详解

    目录简介nodejs中的事件循环phase详解timerspending callbacksidle, prepar......

随机推荐

  1. python基于opencv实现人脸识别

    将opencv中haarcascade_frontalface_default.xml文件下载到本地,我们调用它辅助......

  2. C# AE之返回上一级和下一级的实战操作

    我就废话不多说了,大家还是直接看代码吧~try{//判断是否可以返回上一视图if (mapControl.Activ......

  3. Ocelot一个优秀的.NET API网关框架

    1 什么是Ocelot?Ocelot是一个用.NET Core实现并且开源的API网关,它功能强大,包括了:路由、请......

  4. java 最新Xss攻击与防护(全方位360°详解)

    前沿XSS防范属于前端还是后端的责任 ?XSS 防范是后端 RD(研发人员)的责任,后端 RD 应该在所有用户提交数......

  5. PHP文件操作简单介绍及函数汇总

    文件操作一直是Web程序员头疼的地方,而文件操作在CMS这样的系统中又是必须的。如今,PHP文件操作的函数内容已经非......

  6. vue 页面跳转的实现方式

    一、this.$router.push()1、vue点击跳转4 2、script//跳转前页面传参数:goTo(it......

  7. Java面向对象总结性项目 之 图书馆管理代码

    Java面向对象总结性项目 之 图书馆管理代码 简介 核心需求 ......

  8. java中List去除重复数据的5种方式总结

    前言List 是一个接口,它继承于Collection的接口。它代表着有序的队列。当我们讨论List的时候,一般都和......

  9. php的curl携带header请求头信息实现http访问的方法

    导读:curl请求时添加请求头信息可以模拟真人操作,不容易被当成是爬虫机器人(采集),从而可以绕过Incapsula......

  10. 使用Java语言编写一个五子棋UI界面并实现网络对战功能(非局域网)

    使用Java语言编写一个五子棋UI界面并实现网络对战功能(非局域网)使用Java语言编写一个五子棋UI界面并实现网络......