旋轉，移動和縮放基於方向和相機位置的對象，在Three.js

Question

我正在爲Three.js的基本編輯器工作。我希望能夠旋轉，移動和縮放對象。

使用基本功能的工作，但很好，但有時有點混亂。

cube.rotation.z = Math.PI * val; 
cube.rotation.x = Math.PI * val; 
cube.position.z = val * -1; 
cube.scale.y = val; 

我想要做什麼是在一個方向，而不是一個軸，並從攝像機的角度旋轉對象。

下面是說明這一點的codepen。 https://codepen.io/arpo/pen/LxyoRJ

只要其他輸入不變，它就可以正常工作。 如果拖動範圍「向左旋轉」，它將在z軸上旋轉立方體。但是，如果將範圍「向後旋轉」移至右側，然後再次拖動「向左旋轉」，則旋轉看起來像在Y軸上。其他輸入也是如此。

我明白爲什麼會發生這種情況，但我不知道如何獲得預期的效果。我也希望這從照相機的角度來工作。因此，如果將相機移動到左側並拖動範圍「向後移動」，立方體應遠離或靠近。

所以我想要的是，當您使用旋轉左/右範圍旋轉立方體時，我希望它從用戶視角向左或向右擺動。如果您使用移動範圍，我希望立方體遠離用戶。

Answer 1

您的問題的答案至少需要對三維座標系統如何工作的基本理解。有三個座標，你需要了解系統：

1. 本地：場景中的每個對象都有自己的座標系。一組3個不可見的軸，以對象爲中心，始終指向對象的相同部分，而不管您應用了哪種轉換。
2. 全球：也稱爲世界座標，場景有一個全局座標系，用於描述場景中物體的位置。演示中的兩條紅線是X和Z全局座標軸。
3. 相機：相機有它自己的座標系。再次，這些是3個看不見的軸，一個指向左，一個向上，一個指向現場。

這3個座標系沒有對齊。那麼，它們是默認對齊的，但不是在旋轉對象或相機之後。

當您通過其屬性rotation旋轉對象時，您將圍繞其本地軸旋轉它。您的立方體的Z軸開始與世界Z軸相同。將其畫成從正面突出並與全局紅線對齊的線。然後，將立方體旋轉90度'回到前面'，其Z軸現在朝下。

當然，您的'從左到右'旋轉 - 實際上是Z軸旋轉 - 現在圍繞此向下Z軸旋轉立方體。

爲了圍繞與攝像機座標系對齊的軸旋轉立方體，必須執行多次旋轉和平移轉換。

我推薦學習3D的座標系，模型轉換，視圖轉換和相關基礎知識。否則它將會非常混亂。