2017-05-03 700 views
2

我們正在做一個VR /立體Web應用程序與three.js我們想要顯示相機的角度。three.js相機繞Y軸旋轉似乎關閉

例如: 我們有一個「房間」設置。相機位於中心,此時相機的旋轉與軌道控制器相連。

# create a camera and place it in the scene 
camera = new THREE.PerspectiveCamera(90, 1, 0.1, 2000); 
camera.position.set(0, 35, 60); 
# Attach Orbital controls 
controls = new THREE.OrbitControls(camera, element); 
controls.target.set(camera.position.x + 0.1, camera.position.y, camera.position.z); 
controls.enableZoom = true; 
controls.enablePan = true; 
# Attach DeviceOrientationControls 
controls = new THREE.DeviceOrientationControls(camera, true); 
controls.connect(); 
controls.update(); 

現在每個animationFrame通話過程中,我們要檢查相機的載體:

vector = camera.getWorldDirection(); 
theta = Math.atan2(vector.x, vector.z); 
phi = Math.sqrt((vector.x * vector.x) + (vector.z * vector.z)); 
pitch = Math.atan2(phi, vector.y); 

期待弧度如下:

  • 西塔從原來的視圖方向是旋轉遠(Z),好像你會從(Y)軸向下看。 (想象在相機下面的地面上的時鐘)
  • Phi將是從原始視圖方向(z)向上或向下的仰角。 (想象一下相機側面的時鐘。)
  • 俯視原始Z向量時,會圍繞Z軸旋轉。 (想想照相機背面的時鐘。)

但是,Theta似乎一直是一個因素。 Phi和Pitch似乎沒問題。 我們做例如轉換弧度到度:pitch * (180/Math.PI)

世界和相機本身似乎更新和轉動得很好,旋轉手機/ VR眼鏡的左邊或右邊好像產生與周圍的自然「尋找房間「運動。

通過一次檢查一個軸上的旋轉來完成這些測量,並且大多保持另外兩個面向原始方向。

我們缺少什麼?

回答

0

所以,我們設法深入瞭解了這一點。我們建立了一個數控旋轉工作臺,並在手機上測量了角度,並與我們給計算機控制旋轉工作臺的輸入進行了比較。

結論:Chrome是一塊廢話。它不能也不會生成甚至接近有用的數據。它也不會在可重複的範圍內產生任何東西。

Firefox在相同的手機上有一些問題,在某些點上翻轉軸(可能與萬向節鎖相關或由於旋轉溢出超過360度),但設法非常接近我們的輸入(低於1%)和是超可靠和可重複的。

0

您可以撥打camera.getWorldRotation()獲取euler角度。