今天郭先生说一说使用cannon.js物理引擎绘制地形和使用指针锁定控件。效果如下图。线案例请点击博客原文

这里面的生成地形的插件和指针锁定控件也是cannon.js的作者schteppe封装的,当然也可以自己写一个这样的小插件。好的我们先说说这两个插件的使用方法,然后结合一个小案例应该他们。

1. 地形生成插件

相信一些同学玩过我的世界这款游戏,它的地形就是由好多个规格相同的正方体组成。就像下面这样

那么VoxelLandscape.js能够很好的实现这样的地形生成,我们先来看看生成地形构造函数所需要的参数

voxels = new VoxelLandscape(world,nx,ny,nz,sx,sy,sz);
  • world —cannon.js中的CANNON.World()实例
  • nx — x方向上地形的块数
  • ny — y方向上地形的块数
  • nz — z方向上地形的块数
  • sx — 小矩形x方向上halfSize
  • sy — 小矩形y方向上halfSize
  • sz — 小矩形z方向上halfSize

这样就能构建出一个地形,由于我们还没有进行其他操作,它看起来就是一整块矩形,但是它为我们提供了很多方法,比如说setFilled方法(其他的方法可以自行测试),这个方法可以设置哪些矩形块需要填充,哪些不需要填充,使用方法如下

voxels.setFilled(i,j,k),filled);
  • i — x方向的第i个
  • j — y方向的第j个
  • k — z方向的第k个
  • filled — 是否需要填充

i,j,k可以确定具体是那一块,filled是一个布尔值,true表示填充,false表示不填充,下面是随机挖空5000次方块的例子。

voxels = new VoxelLandscape(world,58,58,58,0.5,0.5,0.5);
for(let i=0; i<5000; i++) {
var filled = false;
voxels.setFilled(Math.floor(Math.random() * 58),Math.floor(Math.random() * 8),Math.floor(Math.random() * 58),filled);
}

这样就可以随心所欲的设置地形了。

2. 指针锁定控件

对于指针锁定控件,three.js已经为我们提供了PointerLockControls方法,它是基于Pointer Lock API实现的,主要用到的方法有请求指针锁定requestPointerLock()、退出指针锁定exitPointerLock()等,下面来说一说这个用于cannon.js的PointerLockControls,他和three的版本又些许区别,看下面代码。

controls = new PointerLockControls( camera , sphereBody );//第一个参数是camera,第二个参数是刚体对象
scene.add( controls.getObject() );//将控制器加入到场景
if(controls) {//如果controls初始化成功
if(document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element) {//如果element处于锁定中,则打开controls
controls.enabled = true;//因为默认enabled为false,所以一般都需要手动打开
this.$refs.info.style.display = 'none';
} else {
controls.enabled = false;
this.$refs.info.style.display = 'inline-block';
}
}
controls.update(clock.getDelta() * 1000);//在每次更新物理世界的时候调用controls.update()方法

指针锁定控件使用一个刚体作为camera的载体,可以往camera的移动看起来更加生动(拥有物理特性)。

3. 案例

下面直接上主要案例代码

initCannon() {
world = new CANNON.World();
world.quatNormalizeSkip = 0;
world.quatNormalizeFast = false;
world.gravity.set(0, -9.8, 0);
world.broadphase = new CANNON.NaiveBroadphase();
world.solver.iterations = 10; physicsMaterial = new CANNON.Material("slipperyMaterial");
var physicsContactMaterial = new CANNON.ContactMaterial(physicsMaterial, physicsMaterial, {friction: 0.3, restitution: 0.5});//规定相同的physicsMaterial材质之间的发生接触时的物理参数。
world.addContactMaterial(physicsContactMaterial); var nx = 58, ny = 8, nz = 58, sx = 0.5, sy = 0.5, sz = 0.5; const radius = 1.6; sphereBody = new CANNON.Body({ //使用球形刚体作为相机载体,让相机拥有质量属性
mass: 5,
position: new CANNON.Vec3(nx*sx*0.5,ny*sy+radius*2,nz*sz*0.5),
shape: new CANNON.Sphere(radius),
material: physicsMaterial
});
sphereBody.linearDamping = 0.9;
world.addBody(sphereBody); groundBody = new CANNON.Body({//地面
mass: 0,
position: new CANNON.Vec3(0, -0.1, 0),
shape: new CANNON.Box(new CANNON.Vec3(200, 0.1, 200)),
material: physicsMaterial
});
world.addBody(groundBody); voxels = new VoxelLandscape(world,nx,ny,nz,sx,sy,sz); for(var i=0; i<nx; i++){
for(var j=0; j<ny; j++){
for(var k=0; k<nz; k++){
var filled = true;
if(Math.abs(Math.sin(i / 6)) < j / 5) {
filled = false;
}
if(Math.abs(Math.sin(k / 6)) < j / 5) {
filled = false;
} voxels.setFilled(i,j,k,filled); }
}
}
voxels.update();
}, for(var i=0; i<voxels.boxes.length; i++){//创建地形相应的网格,该数据存储在voxels.boxes数组中
var b = voxels.boxes[i];
var voxelGeometry = new THREE.BoxBufferGeometry( voxels.sx*b.nx, voxels.sy*b.ny, voxels.sz*b.nz );
var voxelMesh = new THREE.Mesh( voxelGeometry, new THREE.MeshPhysicalMaterial({color: 0x666666}) );
voxelMesh.castShadow = true;
voxelMesh.receiveShadow = true;
scene.add( voxelMesh );
boxMeshes.push( voxelMesh );
}

以上就是地形生成器和使用指针锁定控件的使用方法

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

three.js cannon.js物理引擎地形生成器和使用指针锁定控件的更多相关文章

  1. three.js cannon.js物理引擎之ConvexPolyhedron多边形

    年后第一天上班,郭先生来说一说cannon.js的ConvexPolyhedron(多边形),cannon.js是一个物理引擎,内部通过连续的计算得到各个时间点的数据的状态,three.js的模型可以 ...

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

    今天郭先生说一说cannon.js物理引擎之Heightfield高度场,学过场论的朋友都知道物理学中把某个物理量在空间的一个区域内的分布称为场,高度场就是与高度相关的场,而cannon.js物理引擎 ...

  3. three.js cannon.js物理引擎之制作拥有物理特性的汽车

    今天郭先生说一说使用cannon.js的车辆辅助类让我们的汽车模型拥有物理特性.效果图如下,在线案例请点击博客原文. 下面我们说一下今天要使用的两个类,并简单的看看他们的物理意义 1. Raycast ...

  4. three.js cannon.js物理引擎制作一个保龄球游戏

    关于cannon.js我们已经学习了一些知识,今天郭先生就使用已学的cannon.js物理引擎的知识配合three基础知识来做一个保龄球小游戏,效果如下图,在线案例请点击博客原文. 我们需要掌握的技能 ...

  5. three.js cannon.js物理引擎之齿轮动画

    郭先生今天继续说一说cannon.js物理引擎,并用之前已经学习过的知识实现一个小动画,知识点包括ConvexPolyhedron多边形.Shape几何体.Body刚体.HingeConstraint ...

  6. three.js cannon.js物理引擎之约束

    今天郭先生继续说cannon.js,主演内容就是点对点约束和2D坐标转3D坐标.仍然以一个案例为例,场景由一个地面.若干网格组成的约束体和一些拥有初速度的球体组成,如下图.线案例请点击博客原文. 下面 ...

  7. three.js cannon.js物理引擎之约束(二)

    今天郭先生继续讲cannon.js的物理约束,之前的一篇文章曾简单的提及过PointToPointConstraint约束,那么今天详细的说一说cannon.js的约束和使用方法.在线案例请点击博客原 ...

  8. 通过js子页面回写父页面,改变父页面控件的值

    [原]js中实现子页面向父页面中赋值 (方法一) 父页面:<input  id="input1" type="text"/><a href=& ...

  9. js获取服务器生成并返回客户端呈现给客户的控件id的方法

    var repeaterId = '<%=rpData.ClientID %>'; //Repeater的客户端IDvar rows = <%=rpData.Items.Count% ...

随机推荐

  1. [日常摸鱼]Luogu2521[HAOI2011]防线修建-set维护凸包

    https://www.luogu.org/problemnew/show/2521 题意:维护一个上凸包:删点,查询周长 很容易想到把问题转换为离线:先读入全部操作,记录下最后剩下的点,倒着加点来维 ...

  2. Flink批处理读写Hive

    import org.apache.flink.table.api.*; import org.apache.flink.table.catalog.hive.HiveCatalog; /** * @ ...

  3. Spark性能优化指南

    1 Spark开发调优篇 原则一:避免创建重复的RDD 原则二:尽可能复用同一个RDD 原则三:对多次使用的RDD进行持久化 原则四:尽量避免使用shuffle类算子 因此在我们的开发过程中,能避免则 ...

  4. 网站开发学习Python实现-Django学习-介绍(6.1.1)

    @ 目录 1.MVT 2.ORM 关于作者 1.MVT 主要的目的是为了快速,简便的开发数据库驱动的网站,强调代码的复用,多个组件可以很方便以插件的方式服务于整个框架,采用的是MVT设计模式(差不多的 ...

  5. python序列(七)序列操作的常用内置函数

    1.len(列表):返回:列表中的元素个数,同样适用于元组.字典.集合.字符串等. max(列表).min(列表):返回列表中的最大或最小元素同样适用于元组.字典.集合.range对象等. sum(列 ...

  6. Sentinel入门学习记录

    最近公司里面在进行微服务开发,因为有使用到限流降级,所以去调研学习了一下Sentinel,在这里做一个记录. Sentinel官方文档:https://github.com/alibaba/Senti ...

  7. 编程方式实现MySQL批量导入sql文件

    有时候需要在本地导入一些stage环境的数据到本地mysql,面对1000+的sql文件(包含表结构和数据,放在同一个文件夹下),使用navicat一个一个导入sql文件显然有点太慢了,于是考虑使用s ...

  8. 实现JavaScript继承

    使用TypeScript或者ES2015+标准中的extends关键字是很容易实现继承的,但这不是本文的重点.JS使用了基于原型(prototype-based)的继承方式,extends只是语法糖, ...

  9. phaser3入门教程-从零开始开发一个打砖块游戏

    项目代码 项目代码 体验一下 空格开始,左右箭头控制移动 体验一下 Phaser简介 Phaser是一个HTML5游戏框架.它使用了许多HTML5 API,例如Canvas,WebGL,Audio,G ...

  10. JAVA多线程下高并发的处理经验

    java中的线程:java中,每个线程都有一个调用栈存放在线程栈之中,一个java应用总是从main()函数开始运行,被称为主线程.一旦创建一个新的线程,就会产生一个线程栈.线程总体分为:用户线程和守 ...