最近业务比较忙，但是我们追求 3D 世界的脚步不能停下来~某天在路上看到一辆辆飞驰而过的汽车，想到要不要弄一个赛车类的游戏
没有再用原生，而是使用了 threejs，毕竟大点的 3D 项目，再用原生就是自己给自己找麻烦了……
本文从 0 到 1 讲解了这个游戏的开发过程，其中没有专门的介绍 webgl 和 threejs，没有基础的同学可以结合 threejs 文档一起看，或者先学习一下 webgl 的基础知识~
游戏地址如下：

https://vorshen.github.io/simpleCar/

操作如下：
w 前进
a、d 左右转
space 减速可漂移

目前游戏的碰撞检测没有做完 (后续会更新进行完善)，只会进行汽车左边与赛道中两条边进行碰撞检测。具体哪里下面会说~大家也可以通过亲自试玩来找到哪两条边

下面我们就来从 0 到 1 去实现这个赛车游戏~
注意：文中出现的代码片段是有作用域的！！为了配合讲解上下文而删减了其他的内容！完整代码地址如下：
https://github.com/vorshen/simpleCar

1、游戏准备

首先我们要选择做一款什么游戏，如果是公司级的游戏项目，那开发基本是没有选择权的。自己做着练手那就可以按自己喜好来了。我之所以选择赛车来举例子：
首先是因为赛车游戏比较简单，没有过多的素材要求。毕竟是个人开发，没有专门的设计大大提供模型，模型得自己去找。
其次是赛车游戏简单闭环的成本低，有车，有跑道，能跑起来其实就是一款最简单的游戏了
所以最终就决定了做一款一切从简的赛车游戏，接下来我们要寻找素材

2、素材准备

在网上扒了很久，找到了一款不错的汽车 obj 文件，贴图啥的都有，不过有的颜色还没上，用 blender 进行补齐一下

汽车素材有了，接下来就是赛道的。赛道最早的想法是动态生成，类似之前那个迷宫游戏一样
正规的赛车游戏肯定没法动态生成，因为赛道都需要定制的，有很多细节的东西，比如贴图风景之类的。
我们这个练手项目追求不了那么酷炫，所以可以考虑一下动态生成。
动态生成的好处就是每次刷新后玩都是一个新的地图，可能新鲜度会高一些。
动态生成的也有两种玩法，一种是用一块板不停的去平铺，板的顶点信息
[-1,0,1, 1,0,1, 1,0,-1, -1,0,-1]
用俯视图看起来就是下面这样

但是这个有一个很不好的，就是弯道太粗糙了，每个弯道都是直角，不怎么好看。就换一个方案
obj 建两个模型，分别是直道、转弯，如图

然后这两个个模型不停的去平铺
用 2D 看起来就像下面这样

看起来这个是可行的，但是！真实实现之后发现还是不好！
首先赛道没法回头了，因为我们 y 轴是固定的，没有上下坡的概念。一旦赛道回头新的道路碰到已有的道路就会乱，变成岔路的感觉
其次针对随机要做很多的控制，否则可能出现弯道过于频繁，如图

兼容了一会，发现很是操蛋，所以决定还是自己建一个赛道模型，自己动手丰衣足食，如图

再次安利下 blender 还是很好用的~
在这里设计赛道的时候有一个弯道设计的太难了，不减速无法无碰撞过弯……相信试玩一圈肯定能找到是哪一个弯~

3、threejs

准备工作都弄完了，接下来就是撸代码啦
不知道之前原生 webgl 开发大家还记得不，很繁琐对不对，这次我们用了 threejs，可就方便很多了。不过还是要说一下，推荐先把原生 webgl 弄熟一些再去接触 threejs，否则可能会有很大的依赖性，而且对图形学的一些基础会不牢固。

我们第一步创建整个场景世界

这些是使用 threejs 必须要有的，比我们自己原生去创建 program，shader，再各种编译绑定方便了很多
接下来我们要把模型给导入进去。上次有写过一个简单的 objLoader，这次我们用 threejs 自带的。