CODEWITHSUNDEEP
3daframewebvr
user7606438
user7606438

Reputation:

Set viewer's position and direction programmatically

I'm using A-Frame v3.6.0 and I'd like to set viewer's position and direction after a 3d object is clicked. I'm using this code to define camera and cursor elements:

<a-entity camera="userHeight: 1.6" universal-controls position="0 -1 4">
    <a-entity cursor position="0 0 -1" geometry="primitive: ring; radiusInner: 0.020; radiusOuter: 0.028" material="color: #95E0E8; shader: flat"></a-entity>
</a-entity>

I've seen examples that use setAttribute calls to update position, but I don't know how to get the camera object, or how to set the direction vector.

Upvotes: 1

Views: 325

Answers (1)

boxtrain
boxtrain

Reputation: 2578

You can get A-Frame elements the same way you get HTML elements. Give it an ID, and select it by ID:
HTML: <a-entity id="camera" camera="universal-controls">
JS: document.querySelector('#camera').setAttribute('position', {...})

To change the direction, just use the rotation attribute. You can do your own math to get angles for a certain vector, but look-at handles most of my use cases. There are also plenty of helpful math functions in THREE.

However, the position and rotation of the camera are often set automatically from the headset/device, so you should avoid relying on directly modifying the camera entity and instead modify a wrapper for the camera.

HTML:

<a-entity id="camera-wrapper">
    <a-entity id="camera" universal-controls>
        <a-entity cursor position="0 0 -1" geometry="primitive: ring; radiusInner: 0.020; radiusOuter: 0.028" material="color: #95E0E8; shader: flat"></a-entity>
    </a-entity>
<a-entity>

JS: document.querySelector('#camera-wrapper').setAttribute('position', {...})

Upvotes: 1

Related Questions