2017-05-26 27 views
2

使用AFrame如何手動更改相機旋轉,以便在移動設備上工作並仍然使用外觀控件?aframe調整手機上的相機旋轉

我通過HTML屬性,嘗試像這樣:

document 
    .querySelector('[camera]') 
    .setAttribute('rotation', { x: 0, y: deg, z: 0 }) 

這適用於桌面罰款然而在移動設備上查找控制組件似乎重置攝像機旋轉到以前的值。

我已經在這裏設置了一個演示問題,它改變旋轉&禁用了外觀控制。然後,我設置一個超時,在1秒後重新設置外觀控件。 https://embed.plnkr.co/WA1rKucPk0cGffrbfrTh/

按下任何html按鈕會將您旋轉到某個對象並禁用外觀控件。 1秒後控制器重新啓動。如果您在移動設備上嘗試此操作,您會注意到相機正在旋轉,然後在啓用了外觀控制時恢復1秒。

我還需要在手機上重置一些偏移量,lookcontrols.yawObject或者?

回答

1

把相機的實體內:

<a-entity rotation="0 0 0"> 
    <a-camera></a-camera> 
</a-entity> 

然後旋轉實體,而不是相機。

+0

只是一個警告 - 這對我來說並不真正起作用,因爲它弄亂了外觀控件的旋轉軸,例如水平旋轉不再平行於「地面」平面,而是偏離角度,這導致了怪異的用戶體驗。它可能會在某些情況下解決問題(也許是固定攝像頭),但總的來說,我認爲它不能解決大多數交互式應用程序需要解決問題的方法。 – davnicwil

1

你需要改變它的外表,controls.js一點點,使其工作,因爲當移動它不會從相機實體獲取旋轉屬性

功能updateOrientation在查找controls.js:

if (sceneEl.isMobile) { 
    // On mobile, do camera rotation with touch events and sensors. 
    rotation.x = radToDeg(hmdEuler.x) + radToDeg(pitchObject.rotation.x); 
    rotation.y = radToDeg(hmdEuler.y) + radToDeg(yawObject.rotation.y); 
    rotation.z = radToDeg(hmdEuler.z); 
}