今天郭先生说的是一个物理引擎,它十分小巧并且操作简单,没错他就是cannon.js.这些优点都源自于他是基于js编写的,对于js使用者来说cannon.js拥有其他物理引擎没有的纯粹性.从学习成本来看,cannon.js的学习成本比较低,对于新手来说比较友好,因为它有相对完善的api,学习cannon.js之前我们不妨来看看cannons.js的官方网站以及他的API,对于js学习者来说这是十分必要的.官网上面有一些example,他们十分典型并囊括了大多数的知识点,配合api一起学习是个不错的…

计划做一个宇宙飞船模拟程序,首先做一些技术准备. 可以访问https://ljzc002.github.io/test/Spacetest/HTML/PAGE/spacetestwp2.html查看测试场景,按住qe键可以左右倾斜相机.可以在https://github.com/ljzc002/ljzc002.github.io/tree/master/test/Spacetest查看程序代码,因时间有限,github上的代码可能和本文中的代码有少许出入. 主要内容: 一.程序基础结构 二.场景…

github地址:https://github.com/hua1995116/Fly-Three.js 大家好,我是秋风.继上一篇<Three.js系列:   游戏中的第一/三人称视角>今天想要和大家分享的呢,是做一个海洋球池. 海洋球大家都见过吧?就是商场里非常受小孩子们青睐的小球,自己看了也想往里蹦跶的那种. 就想着做一个海洋球池,然后顺便带大家来学习学习 Three.js 中的物理引擎. 那么让我们开始吧,要实现一个海洋球池,那么首先肯定得有"球"吧. 因此先带大家来…

今天郭先生说一说使用cannon.js物理引擎绘制地形和使用指针锁定控件.效果如下图.线案例请点击博客原文. 这里面的生成地形的插件和指针锁定控件也是cannon.js的作者schteppe封装的,当然也可以自己写一个这样的小插件.好的我们先说说这两个插件的使用方法,然后结合一个小案例应该他们. 1. 地形生成插件 相信一些同学玩过我的世界这款游戏,它的地形就是由好多个规格相同的正方体组成.就像下面这样 那么VoxelLandscape.js能够很好的实现这样的地形生成,我们先来看看生成地形构造…

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

今天郭先生说一说使用cannon.js的车辆辅助类让我们的汽车模型拥有物理特性.效果图如下,在线案例请点击博客原文. 下面我们说一下今天要使用的两个类,并简单的看看他们的物理意义 1. RaycastVehicle类 这是车辆辅助类,将光线从车轮位置投射到地面并施加力.它决定车的位置,角度,质量等信息.下面是它的构造函数 RaycastVehicle ( [options] ) options一共有四个参数,并且比较好理解, chassisBody – 表示车身的刚体 indexForwardA…

关于cannon.js我们已经学习了一些知识,今天郭先生就使用已学的cannon.js物理引擎的知识配合three基础知识来做一个保龄球小游戏,效果如下图,在线案例请点击博客原文. 我们需要掌握的技能点,就是已经学过的cannon.js物理引擎知识.three.js车削几何体.threeBSP和简单的shaderMaterial.下面我们来详细的说一说如何制作这个游戏. 1. 设计游戏 因为我们已经使用过一些物理引擎,所以第一步我们很容易想到要用three做地面网格和墙面网格并为他们生成尺寸相当…

年后第一天上班,郭先生来说一说cannon.js的ConvexPolyhedron(多边形),cannon.js是一个物理引擎,内部通过连续的计算得到各个时间点的数据的状态,three.js的模型可以定时的应用这些状态来达到运动的效果,但是在应用的时候cannon数据模型和three模型一般都是不同的(而且多数情况下都是不一样的),因为更大的cannon数据模型会带来更多的性能问题,并且有的时候是没有必要的,比如说上一篇我们用圆柱来模拟保龄球瓶.但是有一些时候还是需要使用相对复杂的cannon多…

郭先生今天继续说一说cannon.js物理引擎,并用之前已经学习过的知识实现一个小动画,知识点包括ConvexPolyhedron多边形.Shape几何体.Body刚体.HingeConstraint铰链约束等等知识.因为我之前用纯three.js 的THREEBSP实现过一个静态的齿轮,现在就想配合cannon.js让它的转动更加的符合实际而不是匀速转动.下面我们来说说我们要做的这个案例,这个小案例是由5个齿轮组成,左面两个是固定齿轮,最左面的是有动力的齿轮,我们可以控制它的速度,而右面三个齿…

今天郭先生继续说cannon.js,主演内容就是点对点约束和2D坐标转3D坐标.仍然以一个案例为例,场景由一个地面.若干网格组成的约束体和一些拥有初速度的球体组成,如下图.线案例请点击博客原文. 下面来说说如何使用约束来完成一个这样的物理场景. 1. 创建three场景 这一步是基础工作,对于有一定three基础的同学都不会陌生,我就直接上代码了. initThree() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCam…