CODEWITHSUNDEEP
viewthree.jsmenucameraaframe
beek
beek

Reputation: 3750

Making an entity rotate with the camera - Aframe

I'm attempting to make a rolodex menu in Aframe like this.

enter image description here

Here is the glitch so far https://glitch.com/edit/#!/fourth-kitten

I'm trying to get the entity to rotate into view with the camera

   AFRAME.registerComponent('rotate-with-camera', {
    tick: function (){
      console.log(this)
      if(this.el.sceneEl.camera){
        const {rotation} = this.el.sceneEl.camera.parent
        const containerRotation = this.el.getAttribute('rotation')
        this.el.setAttribute('rotation', {...containerRotation, z: containerRotation.y -= rotation._y * 360})
      }
    }
    })

However I can't get a nice smooth roll like this example and I'm confused as to the right maths to get it staying in front of the camera on roll up or roll down to make the next row animate into view.

Any ideas?

Upvotes: 0

Views: 919

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

If you want to position it in front of the camera, then just use the parent - child DOM hierarchy:

<a-camera>
    <a-entity position="0 0 -3></a-entity>
</a-camera>

This way your menu will be in front of the camera, and will be rotating with the camera.

To access outer elements, you can move the container a bit when the camera is looking right - left

Glitch here.

Upvotes: 1

Related Questions