CODEWITHSUNDEEP
javascripthtmlaframe
adrianl3d
adrianl3d

Reputation: 13

AFrame 1.0.3 Camera wont reset to zero rotation

I want to reset the camera to zero rotation on the click of a button. I have placed camera as a child of an entity. After I rotate the camera a bit I then click the button to reset the camera to zero rotation. It goes to zero but then snaps back to the rotation. How can I reset the camera to zero (or any specific rotation). Thank you. Here is a basic hello world scene with an added button (red square at top) and a camera as a child of an entity. 

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

Upvotes: 1

Views: 841

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

The camera (<a-camera> primitive or camera component) is a wrapper around the THREE.PerspectiveCamera. It does not handle rotation by itself.

The rotation is handled, If not otherwise specified, by the look-controls component (which the <a-camera> has by default).

In a HUGE nutshell, the rotation updates are done using two helper objects - the pitchObject and the yawObject. If you want to manipulate the camera orientation - you need to change their rotation, for example:

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

Check it out in this fiddle

Keep in mind, that manipulating a "free" camera is not considered a good practice, as it is a major inconvinience, especially in VR.

You may want to disable the look-controls and rotate a wrapper entity instead.

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

Upvotes: 4

Related Questions