06 Adding Animations in Three.JS for web AR Applications
Here’s a summary of the session:
Animation Types in Three.js:
Intrinsic animations: Pre-built animations embedded in the glTF model (created in Blender or similar).
Custom animations: You can add your own animations by manipulating properties like position, rotation, or scale in Three.js.
Steps for Intrinsic Animations:
Use the AnimationMixer class in Three.js to handle animations.
Example: Airplane model with propeller animation.
Create an animation mixer (airplaneMixer) for the model.
Load the first animation in the model’s gltf.animations[0].
Start the animation using play().
Update the animation every frame using mixer.update(delta) inside the render loop.
Rendering Multiple Animations:
The same process is repeated for other models like the ball and car, adjusting the mixer and scene for each.
Handling Animation Timings:
Use the Clock component to calculate frame timing (delta) and ensure smooth animation across different systems.
Custom Rotation Animation:
Added rotation animation for the car model in the render loop, modifying the rotation.y property incrementally with each frame.
Debugging and Issues:
Fixed minor errors such as incorrect constructor capitalization (Clock), or variable name mismatches.
Outcome:
All models (airplane, ball, and car) have functioning animations, including intrinsic and custom ones like rotating car.
Next Steps:
The next session will explore how to add audio to the scene.
Main.js file completed code
https://drive.google.com/file/d/1-1yQ...