赛车坐标系
先不讨论场景和光线的配置,光是赛车本身涉及到的一些座标变换就足够复杂的了。先假设汽车模型摆放在坐标轴中心,如下图所示:
一般情况下坐标系为右手系表示,即图中的红,绿,蓝分别代表x,y,z轴。假设汽车要向前移动的话,那么车身和车轮都需要沿着坐标系z轴作平移变换,同时前轮需要绕着前轮车轴为中心沿着x轴方向旋转变换。直白地说,就是车子在往前走的时候轮子也需要滚动。
直行时的情况比较简单,但是如果需要旋转就比较麻烦了。先来考虑真实的情况,轮子在转动的时候不是一下子就旋转到位的,而是有个缓慢转动的过程,在转动的过程中车身也一直在前进。我们需要记录下来车身此时面对的方向以及轮子此时面对的方向。我们需要将坐标系拆分成两个部分,一个是车子和整个场景所在的世界坐标系,一个是以车子自身位中心的单位坐标系。我们需要在单位坐标系下对轮子做相对于车身的座标变换,在世界坐标系下更新车子当前的座标和面对的方向。
前期准备
实际上上面的内容Three.js里面的例子已经有现成的代码了,之前还花了好多时间研究诸如cannon.js,Physijs等等JavaSript物理引擎,出来的结果不是车子不停的打转就是动弹不得。还是先考虑没有物理引擎的情况吧。
Car.js的文件可以在Three.js的github源码中找到,在example目录下的js文件夹里面。也可以在我的github里面这个demo的代码中找到,但是我稍微修改了一下里面的参数。
首先我们需要将Three.js库以及Car.js添加到源文件当中
<script src='js/libs/three …
There are comments.