THREE.js圍繞使用軌道路徑的對象旋轉相機

Question

我正在努力解決這個問題。

在我的場景中，我有一個攝像頭，它看着物體的質心。我有一些按鈕可以在特定視圖（前視圖，後視圖...）上沿着不可見的球體圍繞對象（恆定半徑）設置攝像機位置。

當我點擊按鈕時，我想讓相機沿着球體表面從其起始位置移動到結束位置。當相機移動時，我希望它保持固定物體的質心。

有沒有人有關於如何實現這一目標的線索？

感謝您的幫助！

Answer 1

如果你很高興/喜歡使用基本的三角，然後在你的初始化部分，你可以這樣做：

var cameraAngle = 0; 
var orbitRange = 100; 
var orbitSpeed = 2 * Math.PI/180; 
var desiredAngle = 90 * Math.PI/180; 
... 
camera.position.set(orbitRange,0,0); 
camera.lookAt(myObject.position); 

然後在渲染/動畫節中，你可以這樣做：

if (cameraAngle == desiredAngle) { orbitSpeed = 0; } 
else { 
    cameraAngle += orbitSpeed; 
    camera.position.x = Math.cos(cameraAngle) * orbitRange; 
    camera.position.y = Math.sin(cameraAngle) * orbitRange; 
} 

當然，你的按鈕會修改desiredAngle（°,9°,18°或270 °），你需要圍繞正確的平面旋轉（我圍繞着t旋轉他在XY平面上方），你可以玩orbitRange和orbitSpeed，直到你快樂。

您還可以修改orbitSpeed沿着軌道路徑，在各種各樣的cameraAngle s加速和減速平穩騎行。這個過程稱爲「補間」，如果你想知道更多，你可以搜索「補間」或「補間」。我認爲Three.js有補間，但從未考慮過。

哦，還請記住將相機的far屬性設置爲大於orbitRadius，否則您只會看到對象的前半部分，並且根據其內容可能看起來很奇怪。