AFrame 1.0.3 相机不会重置为零旋转

Question

我想通过单击按钮将相机重置为零旋转。我已将相机作为实体的子项放置。在我旋转相机一点之后，我然后单击按钮将相机重置为零旋转。它变为零，但随后又回到旋转状态。如何将相机重置为零（或任何特定的旋转）。谢谢你。这是一个基本的 hello world 场景，其中添加了一个按钮（顶部的红色方块）和一个相机作为实体的子项。

<html>
    <head>      
        <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
    </head>
    <body>
        <a-scene  cursor="rayOrigin: mouse" raycaster="objects: #button , #toggle">
            <a-entity rotation="0 0 0" position="0 0 0" animation=" property: rotation; to: 0 0 0; startEvents: toggle">
                <a-camera  rotation="0 0 0" wasd-controls="acceleration:200" animation=" property: rotation; to: 0 0 0 ; startEvents: toggle"> 
                    <a-entity id = "toggle" geometry="primitive: plane; height: 0.2; width: 0.2" position="0.3 0.7 -1"
                        material="color: red; opacity: 0.5"  >
                    </a-entity> 
                </a-camera>
            </a-entity>     
            <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
            <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
            <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
            <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
        </a-scene>

        <script>
            var toggleEl = document.querySelector('#toggle')
            toggleEl.addEventListener('click', function (evt) {
                toggleEl.emit("toggle"); 
            });
        </script>
  </body>
</html>

Answer 1

相机（<a-camera> 原语或 camera 组件）是 THREE.PerspectiveCamera 的包装器。它本身不处理旋转。

如果没有另外指定，旋转由 look-controls 组件处理（<a-camera> 由 default 处理）。

在 HUGE nutshell 中，旋转更新是使用两个辅助对象完成的 - pitchObject 和 yawObject。如果你想操纵相机方向 - 你需要改变它们的旋转，例如：

// reset the rotation 
let controls = document.querySelector('a-camera').components['look-controls']
controls.pitchObject.rotation.x = 0
controls.yawObject.rotation.y = 0

在this fiddle中查看

请记住，操纵 "free" 相机并不是一个好的做法，因为这是一个主要的不便之处，尤其是在 VR 中。

您可能想要禁用 look-controls 并改为旋转包装器实体。

<!-- Rotate or animate this --/>
<a-entity>
    <!-- instead of this --/>
    <a-camera look-controls='enabled: false'>
    </a-camera>
</a-entity>

AFrame 1.0.3 相机不会重置为零旋转

AFrame 1.0.3 Camera wont reset to zero rotation

html

javascript

aframe