THREE笛卡爾右手座標系詳解

1，正常的笛卡爾右手座標系，以屏幕右方爲+X軸，屏幕上方爲+Y軸，垂直屏幕向外爲+Z軸，以下圖，xy軸組成的平面爲屏幕面

 

但因爲THREE裏的相機並不老是從屏幕正前方視角，還能夠設置座標系任意一個軸爲正上方（相似於旋轉座標系），因此不一樣的設置會致使視角不同

三維座標系裏的點座標格式爲（x,y,z），所以，繪製xyz軸的直線能夠由如下座標構成

X軸：（0,0,0）-（100,0,0）

Y軸：（0,0,0）-（0,100,0）

Z軸：（0,0,0）-（0,0,100）

 

2，相機所在位置position和視線方向lookAt

相機所在位置是一個點（x,y,z），即相機在座標系種的位置

lookAt也是一個點，由相機和lookAt組成的向量就是相機的視線方向了

例如相機在A(100,100,100)，lookAt在B(0,0,0)，那麼視線的方向就很清楚了，這個時候你在X軸上劃一條(0,0,0)-(100,0,0)的直線

在屏幕上並不會顯示一條垂直於屏幕的水平線，而是一條傾斜的直線，緣由就是視角的方向調整了（默認視角是屏幕正前方看向屏幕，即(0,0,100)-(0,0,0)）

 

3，調整相機的XYZ正方向

相機默認的座標系Y軸向上，也能夠設置成XZ軸爲正方向，如今看一下正常座標系

camera.position.x = 500;

camera.position.y = 500;

camera.position.z = 500;

 

camera.up.x = 0;

camera.up.y = 1;

camera.up.z = 0;

 

camera.lookAt({x:0,y:0,z:0});

 

 

圖中白色爲X軸，黃色爲Y軸，紅色爲Z軸

 

再把X軸設爲正方向，結果爲

X設爲正方向，必然是向上的，注意看這個時候的y和z軸

 

再將Z軸設爲正方向，結果爲

Z設爲正方向， Z軸必然是向上的，注意此時的x和y軸

咱們能夠簡單理解成

y.up = 1,一我的站在屏幕前面看屏幕中心，屏幕向右爲+X，屏幕向上爲+Y，屏幕向外爲+Z

x.up = 1,一我的站在屏幕上面看向屏幕中心，雙眼所在直線與屏幕上邊垂直

z.up = 1，一我的站在屏幕的右側看向屏幕中心，雙眼所在直線與屏幕右邊水平，有點像把屏幕當成盤子端在面前，

屏幕面向上，屏幕右側面向眼睛，屏幕上側面向右手方向

難受，三維想象能力不行，幾個姿式擺了半天才明白過來。