制作3D小汽车游戏（下）
书接上回，这一节我们分模块说一说怎么写一个这样的游戏
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方法，判断是否相撞就可以了。
转载请注明地址：郭先生的博客
