Search code examples
aframe

Is it possible to have the parent entity affect each of its child entity differently?


I'm trying to recreate a solar system in VR. I was able to recreate revolution by setting up each planets as the child entity of the sun, and then using the animation function to rotate the sun. However, I would like to make it more realistic by having each planet revolve around the sun at different rates. How would this be done without actively writing out a separate javascript file for the animation? Any help is greatly appreciated!


Solution

  • Don't make planets children of the sun. Use an entity as center of the solar system and rotate each planet around a pivot. You can apply different animations to different planets:

    <a-entity id="earthPivot"
      animation="property: rotation; easing: linear; to: 0 360 0; dur: 5000; loop: true;">
      <a-sphere id="earth" position="0 0 -3.2" radius="0.5" color="blue"></a-sphere>
    </a-entity>
    

    Full example on glitch