製作3D小汽車遊戲(上)

之前一段時間家裏和公司的事太多,一直沒有時間寫博客,最近騰出一段時間,看了一遍官方的examples,收穫頗多,想整理一點東西出來,又苦於沒有好的東西,three寫點東西真是太難了。好吧,今天郭先生就寫一個小汽車的3D遊戲,如下圖

這個遊戲幾乎沒用新的知識點,用了只有有向包圍盒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。下面我們舉個例子。

如上圖有兩個幾何體(模擬兩個輪子)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代表車外

下一節我們接着說。

 

轉載請註明地址:郭先生的博客

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章