(Learn with 🖼️Meme images) How to create 🎨3D animation using 🧠AI (React Three Fiber vs Three.js vs A-Frame + GSAP)

Source: Dev.to

Introduction

These days, I have been making my brain‑training app, Muscle Brain.

• My app DEV post: 🚀 How I released Chrome Extensions (💪🧠 Muscle Brain v4)

Last time, I built a website for the app and created a 2D animation with GSAP.

• My website DEV post: 🧐 I created a website animation that you might stare at for a while (GSAP) 🎨

Now I want to learn 3D and convert the animation from 2D to 3D. Learning 3D turned out to be more challenging than I expected because of many new concepts. Let’s learn 3D together step‑by‑step with meme images for fun and better understanding! 🚀

Difference between 3D web and 2D web

3D offers a more immersive and realistic animation experience, but it has a steeper learning curve than 2D. Key differences:

• Axes: 2D uses only X (horizontal) and Y (vertical). 3D adds Z (depth), allowing objects to be near or far.
• Camera: 2D doesn’t need a camera; everything is visible. 3D requires a camera with position, rotation, and field of view (FOV). Objects behind the camera are not visible.
• Lighting: In 3D, lights are required; without them, materials appear black.
• Materials: 3D uses materials with properties like metalness (0 = plastic, 1 = metal) and roughness (0 = mirror‑like, 1 = matte). CSS is still useful for UI layout around the canvas.

Important 3D words

Below are the essential terms you’ll encounter when working with Three.js (or its wrappers).

Three.js vs React Three Fiber vs A‑Frame

All three libraries wrap WebGL and make 3D development easier, but they target different workflows.

Three.js

• A direct wrapper around WebGL.
• Handles scenes, lights, materials, etc., reducing the amount of low‑level code you need.
• Official docs:
  • Creating a scene
  • Fundamentals

React Three Fiber (r3f)

• A React renderer for Three.js.
• Lets you write 3D code as React components, promoting reuse and declarative style.
• Docs:
  • Introduction
  • Your first scene

A‑Frame

• A declarative HTML‑based framework built on top of Three.js, focused on VR/AR.
• Ideal for non‑React developers who want quick 3D/VR prototypes.
• Docs:
  • Introduction
  • Building a basic scene

Comparison table

All three can be used in a Node.js environment. React Three Fiber requires React, while Three.js and A‑Frame work with plain JavaScript/TypeScript and any framework.

Sample galaxy animation (CodePen)

I created a very simple galaxy animation where random stars move from far away to near the camera. The stars glow on their own, so no lights are needed. The material used:

• React Three Fiber – meshBasicMaterial
• Three.js – MeshBasicMaterial
• A‑Frame – shader: flat

React Three Fiber code sample (GSAP animation)

The snippet below animates each star from a far position (z: -50) to a near position (z: 5) over 3 seconds, looping continuously.

// Animate the star using GSAP
// gsap.fromTo = animate FROM one value TO another value
gsap.fromTo(
  ref.current.position,          // What to animate (the star's position in 3D space)
  { z: -50 },                    // Starting value: far away (50 units behind camera)
  {
    z: 5,                        // Ending value: close to camera (5 units in front)
    duration: 3,                 // Animation takes 3 seconds
    delay: 0,                    // No initial delay
    repeat: -1,                  // Loop forever
    ease: "none"
  }
);