CODEWITHSUNDEEP
javascriptaframewebvr
Saurav Bajracharya
Saurav Bajracharya

Reputation: 365

Smooth Camera Rotation (look-controls) in A-Frame

Working on the beta of my website

I am using A-Frame for the 360 part of the application. This is a snippet of my code for the camera

<a-camera mouse-cursor reverse-mouse-drag="true" id="cam" zoom="1.3"></a-camera>

I can drag my mouse and look around. No problem; works great! But I want to achieve a smooth motion when the camera rotates (like in Google Street View).

I've searched quite a bit and did not find much. I used Unity3D before switching to WebVR. So, I have the concept of lerping the camera movement but I have no idea where to start from in A-Frame.

please help?

Thanks in advance!

Upvotes: 2

Views: 1811

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

If You want to keep the camera rotating for a while after You rotate it then:
1. keep in mind Aframe is supposed to be for VR, moving the camera more than the user wants it to may cause serious headaches.

2. I havent seen any ready components, only a discussion, so If You still wanna do it, I have a couple of ideas:
a) cheap version, where You wrap Your camera in <e-entity>, and make an <a-animation> in it. Give it a duration of 2000, a begin event, and some nice easing. Check out the documentation. Then make a component which would check the rotation of Your camera like this:

AFRAME.registerComponent('camera-check', {
  init: function () {
     var rotation, newRotation;
     camera = document.querySelector('a-camera');
     camera.addEventListener('componentchanged', function(evt) {
         if (evt.detail.name === 'rotation') {
         // here You have your new rotation reference in evt.detail.newData
         // and Your old rotation reference in evt.detail.oldData
         rotation = newData-oldData;
         if(rotation>0){
          newRotation = newData;
          newRotation.y +=15;
         }else{
          newRotation = newData;
          newRotation.y -=15;
         }
     });
  }
});

Then, listen for the mouseup event. When its fired, set the to attribute of the animation component to newRotation and emit an event starting the animation.

I hope You get the idea. Get the rotation rate. On mouseup find which way You're rotating and move a bit more. The easing should make it smooth.

The additional entity is made because when animating the camera, You could fire the component change event. You could also make a flag check, which would disable the componentchanged event when the animation is in progress. That would require You to make a timeout for 2 seconds, or make a listener checking if the animation ended. ( second option is way better, as You get the exact moment of the animation end ).

Furthermore, if You want it to be better, You'd need to get the actual rotation rate either:
1. Checking from the listener how much the component rotated, and then set the newRotation.y further or closer.
2. Get the actual rotation rate by checking the rotation on tick(), then get a rotation delta speed, and actually calculate how far should You move. But no need to be so specific unless You're making a scientific project.

Upvotes: 4

Related Questions