制作3D小汽车游戏（上）

之前一段时间家里和公司的事太多，一直没有时间写博客，最近腾出一段时间，看了一遍官方的examples，收货颇多，想整理一点东西出来，又苦于没有好的东西，three写点东西真是太难了。好吧，今天郭先生就写一个小汽车的3D游戏，如下图

制作3D小汽车游戏（上）-LMLPHP

这个游戏几乎没用新的知识点，用了只有有向包围盒OBB。官方demo，线案例请点击博客原文。但是在做游戏之前先来复习几个知识。

1 有向包围盒OBB

在之前的文章有专门写过Box3盒模型，它属于轴对齐包围盒，而OBB包围盒是一种有向的包围盒，显而易见他们的最大区别就是包围盒是否随模型转动，从他们的构造参数就可以看出一些特征

Box3( min : Vector3, max : Vector3 )
min - Vector3 表示包围盒的下边界。 默认值是（ + Infinity, + Infinity, + Infinity ）。
max - Vector3 表示包围盒的上边界。 默认值是（ - Infinity, - Infinity, - Infinity ）。

OBB( center : Vector3, halfSize : Vector3, rotation : Matrix3 )
center - Vector3 表示包围盒的中心。 默认值是（ 0, 0, 0 ）。
halfSize - Vector3 表示包围盒的中心。 默认值是（ 0, 0, 0 ）。
rotation - Matrix3 表示包围盒的中心。 默认值是（ 1, 0, 0, 0, 1, 0, 0, 0, 1 ）。

OBB的rotation是一个三维矩阵（而不是欧拉角，注意区别Object3D的rotation属性），它里面包含着盒模型的方向信息，除此之外几乎和Box3相同，OBB的方法和Box3也几乎相同。

2 欧拉角

在做游戏的过程中我们也需要了解一下欧拉角，它的前三个参数可以十分方便的表示旋转，但是如果绕多个轴同时旋转的时候可能就会遇到难以解决的问题了，这个时候可能就会用到第四个参数order。下面我们举个例子。

制作3D小汽车游戏（上）-LMLPHP

如上图有两个几何体（模拟两个轮子）mesh1和mesh2,mesh1车轴在z轴，mesh2在x轴。现在我们只让他们沿车轴转动，只需要改变一个参数即可。

mesh1.rotation.copy(new THREE.Euler(0, 0, z));
mesh2.rotation.copy(new THREE.Euler(x, 0, 0));

但是当我们现在不仅要让他们沿车轴滚动，还需要沿着y轴传动，具体转动如下

mesh1.rotation.copy(new THREE.Euler(0, y, z));
mesh2.rotation.copy(new THREE.Euler(x, y, 0));

但是得到的结果和我们想要的就不大一样了，mesh1沿着y轴转动的同时沿可以沿着z轴转动，而mesh2旋转就很奇怪。这件事就是因为欧拉角三个维度的旋转是有顺序的，在mesh1中y轴的转动不会受到z轴的影响，因为沿y轴会先于z轴旋转，而mesh2中y轴的转动就会受到x轴的影响，因此我们需要欧拉角的第四个参数order

mesh2.rotation.copy(new THREE.Euler(x, y, 0, 'YZX'));

这样就可以正常旋转了

3 游戏中用到的变量和常量

这节只说一下用到的变量，下一节在继续说。

let camera, camera2, scene, scene2;
let car = new THREE.Group(), orthoCar = new THREE.Group(), carHalfSize = new THREE.Vector3(), tyreArray = [], steering_wheel, buildObbArray = [];
const carHeight = 10, rotateMax = Math.PI / 6, speedCorrection = 0.04, rotateCorrection = 0.002, 
let speed = 0, rotateTyre = 0, rotateRun = 0, rotateVector = new THREE.Vector3(1,0,0);
let view = 0;

camera, camera2: 分别是透视相机和正交投影相机
scene, scene2: 分别是主场景和小地图场景
car: 小车模型
orthoCar: 小地图中的小车模型
carHalfSize: 小车半长宽高数据
tyreArray: 包含小车四个轮子的组
steering_wheel: 小车的方向盘
buildObbArray: 建筑物数组
carHeight: 车高
rotateMax: 车转弯最大角度
speedCorrection, rotateCorrection: 速度系数和角度系数
speed: 车速
rotateTyre：车轮相对于车的角度
rotateRun: 车相对于场景的旋转角度
rotateVector：车前进方向向量，和rotateRun意义相同（表现形式不同）
ivew: 车的视角，0代表车内，1代表车外

下一节我们接着说。

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

Vadim