three.js 相機camera位置屬性設置詳解

開始很懵逼，徹底不能理解，有個position，還要up和lookAt幹嗎。

[黑人問號臉❓❓❓]

既然是位置屬性不明白，那默認其它屬性都懂了。

上座標軸：

先來第一個position屬性，能夠設置xyz。

假設設置y爲 1000

position(0,1000,0);

相機的位置是下圖：

單獨設置xz軸都和以上相似，位置z或者x軸某個位置。

那lookAt，字面上的意思就是，看向哪裏。

相機默認是由正z軸看像-z軸（相機鏡頭對着-z軸方向拍），就是咱們由屏幕外向屏幕內看同樣。

camera.lookAt({//相機看向哪一個座標
                    x : 0,
                    y : 0,
                    z : 0
                });

如下爲實例爲 相機看向原點0,0,0。（相機位置position(500,500,1000)）

如下爲不設置lookAt

由於相機的位置在x軸500上,y軸500,z軸1000。默認是看向-z軸，因此只能看到y軸500位置的線條了。

那up屬性又是什麼鬼，相機位置代碼以下設置狀況下：

camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 500;//相機的位置
                camera.position.y = 500;
                camera.position.z = 1000;
//                camera.up.x = 0;//相機以哪一個方向爲上方
//                camera.up.y = 1;
//                camera.up.z = 0;
                camera.lookAt({//相機看向哪一個座標
                    x : 0,
                    y : 0,
                    z : 0
                });

　

一切正常。

加個up屬性試試：

camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 500;//相機的位置
                camera.position.y = 500;
                camera.position.z = 1000;
                camera.up.x = 0;//相機以哪一個方向爲上方
                camera.up.y = 0;
                camera.up.z = 1;
                camera.lookAt({//相機看向哪一個座標
                    x : 0,
                    y : 0,
                    z : 0
                });

代碼設置z軸爲1，表示以z軸爲相機的上方。（默認y軸爲上方）

就是躺着看，趴着看，側着看的區別（我是這麼認爲的）

還不明白就是，手機正着拍，倒着拍，旋轉拍~~~