AFrame 1.0.3 Камера не обнуляется - PullRequest
Новая
       4

AFrame 1.0.3 Камера не обнуляется

1 голос
/ 18 февраля 2020

Я хочу сбросить камеру в нулевое вращение одним нажатием кнопки. Я поместил камеру как ребенка от сущности. После того, как я немного поверну камеру, я нажимаю кнопку, чтобы сбросить камеру на ноль. Это идет в ноль, но затем возвращается к вращению. Как я могу сбросить камеру на ноль (или любое заданное c вращение). Спасибо. Вот базовая c сцена мира приветствия с добавленной кнопкой (красный квадрат вверху) и камерой в качестве дочернего объекта. 

<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>

1 Ответ

2 голосов
/ 18 февраля 2020

Камера (<a-camera> примитив или camera компонент) является оберткой вокруг THREE.PerspectiveCamera . Он не обрабатывает вращение сам по себе.

Поворот обрабатывается, если не указано иное, компонентом look-controls (который <a-camera> имеет по умолчанию ).

В двух словах HUGE обновления ротации выполняются с использованием двух вспомогательных объектов - pitchObject и yawObject. Если вы хотите манипулировать ориентацией камеры - вам нужно изменить их вращение, например: 

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

Проверьте это в этой скрипке

Имейте в виду, что манипулирование «свободная» камера не считается хорошей практикой, так как это является большим неудобством, особенно в VR.

Вы можете отключить look-controls и повернуть объект-оболочку вместо этого. 

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