Search code examples
renderaframevirtual-reality

A-frame render lop and view refresh


I am trying to create a First person view in A-frame using the .obj model of a car.

The camera has been positioned close to the driver's seat, and there is a timed interval in javascript that moves the camera position by doing trignometric calculations and moves the camera accordingly.

Here are two problems I am facing

1) How do you make this smoother? Is there a hook for the render loop in A-frame which can be accessed in javascript? I cant seem to find the documentation for it.

2) When I view the above page in VR mode on the phone ( Android 9), the animation created stops abruptly, which works well in fullscreen mode.

The code for the html is here https://raw.githubusercontent.com/CuriosityGym/VRWithAframe/master/templates/class3-models.html

The example can be accessed here http://cgaframe.herokuapp.com/class3

Thank You!


Solution

  • You have a setInterval that fires every 100ms, animating the car at 10fps. That’s why it’s not smooth. Create a component and use the tick method to animate

    In addition, you should not animate the camera directy because its position will be overriden by the headset pose in VR mode. Setup and animate a camera rig