书接上回，这一节我们分模块说一说怎么写一个这样的游戏
1. 初始化场景、相机和渲染器
这几乎是绘制three必须做的事情，我们有两套场景和相机，一个是主场景和相机，另一个是小地图的场景和相机（用来俯视建筑和小汽车），渲染器设置一级曝光，输出编码设置为sRGBEncoding，代码如下。
scene = new THREE.Scene();
scene.background = new THREE.Color(0x8FBCD4);
scene.fog = new THREE.Fog(0x8FBCD4, 3000, 4000);camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 10000);
camera.position.set(10,10,10);scene2 = new THREE.Scene();
scene2.background = new THREE.Color(0xffffff);camera2 = new THREE.OrthographicCamera(-400, 400, 400, -400, 1, 1000);
camera2.position.set(0, 1000, 0);
camera2.lookAt(0,0,0);renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
this.$refs.box.appendChild(renderer.domElement);
2. 设置地面和建筑
地面很简单，就是一个plane
initGround() {
const ground_geom = new THREE.PlaneBufferGeometry(8000, 8000);
const ground_mate = new THREE.MeshLambertMaterial({color: 0xBCD48F, side: THREE.DoubleSide});
const ground_mesh = new THREE.Mesh(ground_geom, ground_mate);
ground_mesh.rotation.x = - Math.PI / 2;
scene.add(ground_mesh);
},
设置建筑，我们需要给每一个建筑设置长宽高、颜色、位置，并把它们放到一个组里，然后然需要给每一个建筑初始化一个OBB，并把这些OBB信息添加到一个数组中，便于我们日后做碰撞检测
initBuild(num) {
let color = new THREE.Color();
let build = new THREE.Group();
for(let i=0; i<num; i++) {
let w = Math.random() * 50 + 50;
let h = Math.random() * 100 + 100;
let d = Math.random() * 50 + 50;
let x = Math.random() * 8000 - 4000;
let z = Math.random() * 8000 - 4000;
if((x * x + z * z) < Math.pow(140, 2)) {
//40为车半长的估计值
x = Math.pow(140, 2) / x;
z = Math.pow(140, 2) / z;
}
let geometry = new THREE.BoxBufferGeometry(w, h, d);
let material = new THREE.MeshStandardMaterial({color: new THREE.Color().setHSL(Math.random(), 1.0, 0.6)});
let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(x, h / 2, z);
build.add(mesh);
let obb = new OBB();
buildObbArray.push(obb.set(new THREE.Vector3(x, h / 2, z), new THREE.Vector3(w/2, h/2, d/2), new THREE.Matrix3()));
}
scene.add(build);
scene2.add(build.clone());
},
3. 初始化小汽车
这里我们要下载好一个小汽车的模型，首先把模型设置成我们想要的大小，这里车高设置成10，其他维度等比例改变，然后找到方向盘，轮子等部分，添加到全局的组中，便于我们控制。
initCar() {
const shadowTexture = new THREE.TextureLoader().load('/static/gltf/super_car/super_car_ao.png');
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/static/gltf/');
loader.setDRACOLoader(dracoLoader);
loader.load('/static/gltf/super_car/super_car.glb', gltf => {
const model = gltf.scene.children[0];
model.rotation.y = -Math.PI / 2;
steering_wheel = model.getObjectByName('steering_wheel');[] const shadow = new THREE.Mesh(
new THREE.PlaneBufferGeometry( 0.655 * 4, 1.3 * 4 ),
new THREE.MeshBasicMaterial( {
map: shadowTexture, blending: THREE.MultiplyBlending, toneMapped: false, transparent: true
} )
);
shadow.position.y = 0.1;
shadow.rotation.x = - Math.PI / 2;
model.add(shadow); const size = new THREE.Box3().setFromObject(model).getSize(new THREE.Vector3());
model.scale.copy(new THREE.Vector3().addScalar(carHeight / size.y));
carHalfSize = new THREE.Box3().setFromObject(model).getSize(new THREE.Vector3()).multiplyScalar(0.4); car.add(model);
tyreArray.push(car.getObjectByName('wheel_fl'),car.getObjectByName('wheel_fr'),car.getObjectByName('wheel_rl'),car.getObjectByName('wheel_rr'));
car.userData.obb = new OBB(new THREE.Vector3(0,5,0), carHalfSize, new THREE.Matrix3());
scene.add(car);
orthoCar = new THREE.Mesh(new THREE.SphereBufferGeometry(20, 20), new THREE.MeshBasicMaterial({color: 0xff0000, side: THREE.DoubleSide}));
orthoCar.rotation.x = - Math.PI / 2;
scene2.add(orthoCar);
} );
},
4. 添加事件、转弯、增减速和切换视角
这里我们主要使用q–切换视角，a，d–转弯，w，s–加减速。
document.addEventListener('keypress', event => {
if(event.key == 'd') {
this.turn(0);
} else if(event.key == 'a') {
this.turn(1);
} else if(event.key == 'w') {
this.speed(1);
} else if(event.key == 's') {
this.speed(0)
} else if(event.key == 'q') {
view = view == 0 ? 1 : 0;
}
})
对于速度的控制，sp代表左右方向
speed(sp) {
if(sp == 0 && speed > 0) {
speed -= 2;
} else if(sp == 0 && speed > -10) {
speed -= 0.5;
} else if(sp == 1 && speed < 40) {
speed += 0.5;
}
},
对于转弯的控制，我们用多段控制模拟非线性
turn(direct) {
//模拟非线性转向
if(direct == 0 && rotateTyre > -rotateMax * 0.5) {
rotateTyre -= 0.02;
} else if (direct == 0 && rotateTyre > -rotateMax * 0.8) {
rotateTyre -= 0.04;
} else if (direct == 0 && rotateTyre > -rotateMax) {
rotateTyre -= 0.06;
} else if(direct == 1 && rotateTyre < rotateMax * 0.5) {
rotateTyre += 0.02;
} else if(direct == 1 && rotateTyre < rotateMax * 0.8) {
rotateTyre += 0.04;
} else if(direct == 1 && rotateTyre < rotateMax) {
rotateTyre += 0.06;
}
tyreArray[0].rotation.y = rotateTyre;
tyreArray[1].rotation.y = rotateTyre;
//方向盘
steering_wheel.rotation.y = - rotateTyre;
},
5. 渲染
因为我们有两个场景要渲染，这里就选择渲染两次
render() {
stats.update();
this.run();
renderer.setScissor( 0, 0, window.innerWidth, window.innerWidth );
renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
renderer.setScissorTest(true);
renderer.render( scene, camera );
renderer.setScissor( 0, 0, window.innerHeight/4, window.innerHeight/4 );
renderer.setViewport( 0, 0, window.innerHeight/4, window.innerHeight/4);
renderer.setScissorTest(true);
renderer.render( scene2, camera2 );
this.globalID = requestAnimationFrame(this.render);
}
run方法里面控制着车的角度，车子的位置，轮子的传动，相机的位置，相机的lookAt，以及碰撞检测，这里面有我们上一节复习的有向包围盒OBB和欧拉角的使用
run() {
let delta = - clock.getDelta();
//轮胎转动∝速度
tyreArray.forEach(d => d.rotation.copy(new THREE.Euler(delta * speed + d.rotation.x, d.rotation.y, d.rotation.z, 'ZYX')));
//rotateOffset 旋转偏移量 rotateTyre轮胎偏转 rotateCorrection偏转系数 speed车速
let rotateOffset = Math.sin(rotateTyre) * rotateCorrection * speed;
//rotateRun 旋转偏移总量
rotateRun += rotateOffset;
//rotateVector 车前进方向向量（不断乘offset得到）
rotateVector.applyAxisAngle(new THREE.Vector3(0,1,0), rotateOffset);
//车x和z方向增加量 ∝车速
car.position.x += speed * speedCorrection * rotateVector.x;
car.position.z += speed * speedCorrection * rotateVector.z;
camera2.position.set(car.position.x, 1000, car.position.z);
camera2.lookAt(car.position.x, 10, car.position.z);
orthoCar.position.copy(car.position);
//车身旋转 使用 旋转偏移总量rotateRun
car.rotation.y = rotateRun;
//切换视角
if(view == 0) {
camera.position.set(car.position.x - 3 * Math.sin(rotateRun), 8, car.position.z - 3 * Math.cos(rotateRun));
camera.lookAt(camera.position.x + Math.cos(rotateRun), 8, camera.position.z - Math.sin(rotateRun));
} else {
camera.position.set(car.position.x + 50 * Math.cos(rotateRun + Math.PI * 0.9), 20, car.position.z - 50 * Math.sin(rotateRun + Math.PI * 0.9));
camera.lookAt(camera.position.x + Math.cos(rotateRun), 19.9, camera.position.z - Math.sin(rotateRun));
}
//判断是否碰撞
car.userData.obb.set(car.position, carHalfSize, new THREE.Matrix3().setFromMatrix4(car.matrixWorld));
const obb = car.userData.obb;
for(let i=0; i<buildObbArray.length; i++) {
const obbTest = buildObbArray[i];
if(obb.intersectsOBB(obbTest) === true) {
speed = 0;
}
}
},
这里我们直接遍历建筑的OBB数组然后通过intersectsOBB方法，判断是否相撞就可以了。
转载请注明地址：郭先生的博客
