使用Three.js在本地軸上旋轉攝像機X

我是Three.js的新手，對3D空間引擎相當新穎，我試圖實現的是360等分矩形圖像查看器。使用Three.js在本地軸上旋轉攝像機X

我的腳本到目前爲止做的是在0,0,0處創建一個攝像頭，並在法向反轉的同一位置創建一個球形網格，並創建一個我的360圖像的發射圖。使用攪拌機的視現場

表示。

用戶應該能夠使用鼠標拖動或鍵盤箭頭旋轉攝像頭，所以使用鼠標監聽器，我創建了拖動功能，計算攝像機Y軸（藍色）和X軸（紅色）的旋轉量。在每個渲染幀。我還創建最小和最大旋轉界限上X（因此用戶不能向後旋轉），如下所示：

var render = function() { 
    requestAnimationFrame(render); 

    if((camera.rotation.x < Math.PI/6 && speedX >= 0) || (camera.rotation.x > -Math.PI/6 && speedX <= 0)) 
     camera.rotation.x += speedX * (Math.PI/180); 
    camera.rotation.y += speedY * (Math.PI/180); 

    renderer.render(scene, camera); 
};

凡speedX和迅速表示在各軸的旋轉量。

到目前爲止這麼好，但由於這些旋轉座標是相對於世界而不是相機本身，所以X旋轉使相機變得瘋狂，因爲在Y軸旋轉了幾度之後，相機的X軸是不再像世界X軸一樣。

最後，我的問題是：如何在每個框架上將相機旋轉到自己的X軸上？

來源

2016-12-07 arvere

等距離長方圓柱全景[演示]（https://threejs.org/examples/webgl_panorama_equirectangular） – prisoner849

@avere嘗試'camera.rotation.order =「YXZ''。 //偏航，俯仰，滾動 – WestLangley

@WestLangley太棒了！奇蹟般有效！你介意寫一個更深入的答案，所以我可以接受它並且（希望）我和其他人能理解這個魔法？非常感謝！ – arvere

如果你想有一個攝像頭的旋轉有偏航（航向），俯仰和滾轉方面的意思，你需要設置：

camera.rotation.order = 'YXZ'; // default is 'XYZ'

欲瞭解更多信息，請參閱this stackoverflow answer。

three.js所r.82

來源

2016-12-07 18:46:30 WestLangley

使用Three.js在本地軸上旋轉攝像機X

回答

相關問題