The following WebGL animation is designed using a similar approach used by its desktop OpenGL counterpart.

• Each object is built using its own JS class (Wheel.js SwingArm.js, and SwingFrame.js)
• Each animated object is controlled by a separate coordinate frame (THREE.Matrix4 objects: wheel_cf and arm_cf)
• The render "loop" invokes a function that updates these two coordinate frames where the motions are calculated using the current time.

Credits

The initial skeleton of the code was generated by YeoMan ThreeJS Generator