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軸為上方）

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

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