DEV Community

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

Posted on

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

#ai #webdev #node #css

Intro

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 was making a website for my app, and I learned and created an 2D animation with GSAP.↓
・My website DEV post (🧐I created a website animation that you might stare at for a while (GSAP)🎨)
So this time, I would like to learn 3D, and change my animation from 2D to 3D. Learning 3D was quite more difficult than I imagined, because there were many new concepts that weren't at 2D. OK, Let's learn 3D together step by step with Meme images for fun and better understanding??🚀

Difference between 3D web and 2D web

3D gives us more immersive and reality to animation than 2D. Although, 3D has steeper learning curve, and takes time to understand than 2D. Here are some of the differences between 2D and 3D.

2D has only X (horizontal) and Y (vertical) axis, and everything is flat on the screen. However, 3D has X (horizontal), Y (vertical), and Z (depth) axis, so objects can be far away or close to you.

No camera is needed for 2D. You can see everything on the page. However, a camera is needed for 3D for your eyes. It has position, rotation and field of view (FOV), and you cannot see objects behind the camera. Field of view is the extent of the scene a camera can capture, and it is measured in degrees.

In 2D, everything is always visible. However, at 3D, lights are required to see anything. Without lights, materials appear black, so you need to set lights ust like 3D objects.

2D uses CSS for coloring. However, 3D uses materials for coloring. Materials have concepts such as metalness and roughness. Metalness shows how metallic the object is, and 0 looks plastic, and 1 looks metal. Roughness shows how rough the object is, and 0 looks like a mirror, and 1 looks matte.
CSS is not directly used for 3D web, but its knowledge is needed. For example, background color, layout for UI around 3D canvas, and others uses CSS.

This is a simple comparison table of 2D web and 3D web. ↓

Concept 2D web 3D web
Level Easy Hard
Axis X, Y X, Y, Z
Camera No Yes
Light No Yes
Coloring CSS Material

Important 3D words

Let's learn the minimum words and their meanings, since we are having busy days eating, sleeping, and enjoying Meme.
Scene, camera and renderer are necessary for Three.js. With these, we can render the scene with camera.
3D objects are called mesh in three.js. A mesh is made of a geometry (shape) and a material (color).

This is a table of most important 3D words and meanings. ↓

Words Meanings
Scene Canvas
Camera Your eyes
Render Draw (= Scene + Camera)
Geometry Shape
Material Color
Mesh 3D object (= Geometry + Material)

Three.js vs React Three Fiber vs A-Frame

Three.js, React Three Fiber, and A-Frame are famous and popular for handling 3D web, so let's take a look at them one by one.

Three.js is a wrapper of WebGL that can draw 3D. WebGL is a very low-level system that only draws points, lines, and triangles, so if you want to draw something, it requires a lot of code. However, Three.js can handle things like scenes, lights, and materials, so it can reduce code and time.

This is the official documentation of Three.js, and it explains the basics very well. ↓
https://threejs.org/manual/#en/creating-a-scene

This is also the official documentation of Three.js, and explains little deeper than the one above. ↓
https://threejs.org/manual/#en/fundamentals

React Three Fiber (r3f) is a wrapper of Three.js, and you can use Three.js easier and less code than vanilla Three.js. React Three Fiber enables you to write 3D code like React components and make it easy to reuse your code. React Three Fiber can do everything that Three.js can do, and there is no overhead to plain Three.js.

Please check the React Three Fiber official documentation for further information.
React Three Fiber introduction ↓
https://r3f.docs.pmnd.rs/getting-started/introduction
React Three Fiber about scene ↓
https://r3f.docs.pmnd.rs/getting-started/your-first-scene

A-Frame is also a three.js wrapper and it can build virtual reality (VR) easily with HTML component. It is best for non React developer and people who want to make 3D simple.

Please check the A-Frame official documentation for full information.
A-Frame introduction ↓
https://aframe.io/docs/1.7.0/introduction/
A-Frame building a basic scene guide ↓
https://aframe.io/docs/1.7.0/guides/building-a-basic-scene.html

Three.js, React Three Fiber, and A-Frame can be used in your Node.js environment. React Three Fiber is only for React, but Three.js and A-Frame work with JS/TS and any other framework.

Here is a comparison table of Three.js, React Three Fiber, and A-Frame.　↓

Feature Three.js React Three Fiber A-Frame
Level Hard Medium Easy
Code Style Object oriented React component HTML component
Framework Vanilla JS,
Any framework		 React only Vanilla JS,
Any framework
Best For Maximum control,
non-React		 React developers Beginners,
VR/AR

OK. Now let's compare the actual code of Three.js, React Three Fiber, and A-Frame on CodePen. I created I very simple galaxy 3D animation that random stars come from far away to near, and pass by as a sample.

Although I wrote that "light" is necessary for 3D web, this time we will not use it. Because we are making stars, and they glow by themselves. We will use material that glows on its own without light, meshBasicMaterial for React Three Fiber, MeshBasicMaterial for Three.js, and shader: flat for A-Frame.

React Three Fiber code sample

This part is the GSAP animation. It animates the stars from front to back in a 3 second loop. ↓

// 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: delay,        // Wait before starting (each star different)
    repeat: -1,          // Loop forever (-1 = infinite)
    ease: 'none'         // Constant speed (no acceleration/deceleration)
  }
);
Enter fullscreen mode Exit fullscreen mode

Please check my previous post for more explanation about GSAP. ↓
🧐I created a website animation that you might stare at for a while (GSAP)🎨

This part is the Mesh. A Mesh is a 3D object that has Geometry (shape) and Material (color). ↓

<mesh ref={ref} position={position}>
  {/*
    <mesh> = 3D object (in R3F, this is like THREE.Mesh)
    ref={ref} - connects our useRef to this mesh
    position={position} - sets initial position [x, y, z]
  */}

  {/*
    <sphereGeometry> = the SHAPE of the star (a ball)
    args={[radius, widthSegments, heightSegments]}
    args={[0.1, 8, 8]} = small sphere with 8x8 segments
  */}
  <sphereGeometry args={[0.1, 8, 8]} />

  {/*
    <meshBasicMaterial> = the SURFACE/COLOR of the star
    color="#ffffff" = white
    Basic material = doesn't need lights (always bright!)
  */}
  <meshBasicMaterial color="#ffffff" />
</mesh>
Enter fullscreen mode Exit fullscreen mode

This part is the Canvas. Canvas creates Scene, and all 3D objects must be inside Canvas. Canvas has a Camera (Your Eyes), and it determines where you see from. ↓

// <Canvas> = R3F's magic component that:
// 1. Creates Three.js scene
// 2. Creates WebGL renderer
// 3. Creates render loop (no requestAnimationFrame needed!)
// 4. Handles window resize automatically
// camera={{ position: [0, 0, 5] }} = camera 5 units forward on Z-axis
<Canvas camera={{ position: [0, 0, 5] }}>
Enter fullscreen mode Exit fullscreen mode

At this part, React starts rendering the Canvas. ↓

// ============================================
// RENDER TO PAGE
// ============================================
// ReactDOM.createRoot - React 18 syntax for rendering
// document.getElementById('root') - finds <div id="root"> in HTML
// .render(<App />) - renders our App component to that div
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
Enter fullscreen mode Exit fullscreen mode

Please check the code inside CodePen for full code and detail code comments.

A-Frame code sample

This part is the <a-scene>, and all 3D objects must be inside . has a <a-camera> (Your Eyes), and it determines where you see from. <a-entity> is used to group the stars to a starfield. ↓

<!--
  ==========================================
  <a-scene> = The entire 3D world
  ==========================================
  Everything 3D must go inside <a-scene>
  A-Frame automatically creates:
  - WebGL renderer
  - Camera (unless you specify one)
  - Lights (unless you specify them)
  - Render loop (no code needed!)
-->
<a-scene background="color: #0a0e27">

  <!--
    ==========================================
    <a-camera> = Your viewpoint in 3D space
    ==========================================
    position="x y z" format (space-separated, not commas!)
    position="0 0 5" means:
      x: 0 (centered left/right)
      y: 0 (centered up/down)
      z: 5 (5 units forward)
  -->
  <a-camera position="0 0 5"></a-camera>

  <!--
    ==========================================
    <a-entity> = Empty container
    ==========================================
    id="starfield" lets us find it with JavaScript
    We'll add stars to this container using JS
  -->
  <a-entity id="starfield"></a-entity>

</a-scene>
Enter fullscreen mode Exit fullscreen mode

This part creates star that is sphere shape and white. ↓

// --- Create a sphere element ---
// document.createElement creates an HTML element
// 'a-sphere' is A-Frame's sphere primitive
const star = document.createElement('a-sphere');

// --- Set star size ---
// radius='0.1' makes a small sphere (0.1 units)
// In A-Frame, attributes are strings!
star.setAttribute('radius', '0.1');

// --- Set star color ---
// color='#ffffff' = white (same as CSS)
star.setAttribute('color', '#ffffff');

// --- Set material shader ---
// shader: flat = no lighting calculations (always bright)
// Makes stars glow like real stars!
star.setAttribute('material', 'shader: flat');
Enter fullscreen mode Exit fullscreen mode

GSAP part is as same as React Three Fiber, so i will skip it.

Please check the code inside CodePen for full code and detail code comments.

Three.js code sample

This part is the initial setup. At Three.js you need to set, scene, camera (Your Eyes), renderer (Thing that draws everything) manually. ↓

// ============================================
// STEP 1: CREATE THE SCENE
// ============================================
// The scene is like a container for all 3D objects
// Think of it as the "world" where everything lives
const scene = new THREE.Scene();

// Set background color to dark blue (space color!)
// 0x0a0e27 is hex color (R:10, G:14, B:39)
scene.background = new THREE.Color(0x0a0e27);

// ============================================
// STEP 2: CREATE THE CAMERA
// ============================================
// Camera = your eyes in the 3D world
// PerspectiveCamera creates realistic perspective (things far away look smaller)
const camera = new THREE.PerspectiveCamera(
  75,  // FOV (Field of View) in degrees - how wide you can see
  window.innerWidth / window.innerHeight,  // Aspect ratio (width/height)
  0.1,  // Near clipping plane - closest distance camera can see
  1000  // Far clipping plane - farthest distance camera can see
);

// Move camera forward on Z-axis (so we can see the stars)
camera.position.z = 5;

// ============================================
// STEP 3: CREATE THE RENDERER
// ============================================
// Renderer = the thing that draws everything to the screen
// WebGLRenderer uses GPU for fast 3D graphics
const renderer = new THREE.WebGLRenderer({
  antialias: true  // Smooth edges (no jagged lines)
});

// Set renderer size to fill entire window
renderer.setSize(window.innerWidth, window.innerHeight);

// Add renderer's canvas to the HTML page
// renderer.domElement is the <canvas> element
document.getElementById('container').appendChild(renderer.domElement);
Enter fullscreen mode Exit fullscreen mode

This part makes a star that is sphere shape and white. ↓

// --- Create star shape (geometry) ---
// SphereGeometry = a ball shape
// Args: (radius, widthSegments, heightSegments)
const geometry = new THREE.SphereGeometry(0.1, 8, 8);

// --- Create star surface (material) ---
// MeshBasicMaterial = simple material (doesn't need lights)
// color: 0xffffff = white in hex (like #ffffff in CSS)
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });

// --- Combine geometry + material = Mesh ---
// Mesh = the actual 3D object you can see
const star = new THREE.Mesh(geometry, material);
Enter fullscreen mode Exit fullscreen mode

Three.js also needs requestAnimationFrame() for render loop. ↓

// ============================================
// STEP 5: RENDER LOOP
// ============================================
// Animation loop - runs every frame (~60 times per second)
function animate() {
  // Request next frame (creates smooth animation)
  requestAnimationFrame(animate);

  // Render the scene from camera's perspective
  // This actually draws everything to the screen
  renderer.render(scene, camera);
}
Enter fullscreen mode Exit fullscreen mode

As you can see, Three.js requires more code than others, but it means it is more controllable.

Please check the code inside CodePen for full code and detail code comments.

GSAP part is as same as React Three Fiber, so i will skip.

Tips for creating 3D animation with AI

These are some points I think that are important to create 3D animation with AI.
1️⃣ First of all, learn the basics of 3D and animation. This time, it will be React Three Fiber or Three.js or A-Frame and GSAP. Otherwise, you cannot write a good prompt for AI, since you do not know how to instruct AI.
2️⃣ Write a prompt as specific as you can, and then the output will also be as you imagine.
3️⃣ Create step by step and check how it works immediately. Fix right away if it does not work as you think. The later you fix it, the more coplicated the code becomes, and the harder it gets to fix.
4️⃣ If you want to skill up, ask AI or check yourself and understand "What each code means". This will lead you to write better specific prompt for AI, and output of AI will be better.

I wrote more posts about ”How to use AI better” before. ↓
・🤖🤖How to run AI in parallel easily and for free (Git Worktree Runner)🧠🧠
・🤖How to make AI follow your instructions more for free (OpenSpec)📝
・🧠How to use AI more efficiently for free (Serena MCP)🧐

Outro

It took time to learn about 3D than I expected, and I could write only the basic of basic of 3D animation. Feeling boring that we only learned the 3D animation basic and simple galaxy 3D animation? Don’t worry, leave it to me.🦸 I am creating a more fun and complicated 3D animation, and preparing for my future post. Lots of surprises are on the way. So, please stay tuned on Web Developer Hyper.

I hope you learned something from this post.
Thank you for reading.
Happy AI coding!🧠
You're absolutely right!🤖

If you know anything about 3D animation, or have any good ideas about 3D animation, please drop a comment below.⬇️⬇️

Top comments (5)

Collapse
 
itsugo profile image
Aryan Choudhary •

Really enjoyed this breakdown, especially the way you compared R3F, Three.js, and A-Frame through practical examples, and of course loved those memes. I’ve been trying to add a small interactive 3D orb to my portfolio, and this post clarified a few concepts I was struggling with (camera + material behavior in particular).

I actually just wrote about the first version of that project, but I kept the animation static for now because I couldn’t get GSAP to behave the way I wanted. Seeing your examples makes me want to take another shot at it in the next release.

If you're ever open to sharing a bit of guidance on handling simple 3D interactions or animation flows, I’d love to connect. Either way, thanks for putting this together, super helpful post!

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper •

Thank you for your compliment!😄 I am so glad to hear my post was helpful to others. Learning 3D animation was quite challenging, but it was more fun than difficult. I just started learning 3D animation from this post, but if there are questions, please add it to this comment field. Let's learn together!

Collapse
 
itsugo profile image
Aryan Choudhary •

Thanks! 🙏
In that case, here’s the part I’m stuck on:
I want my orb to respond to hover/drag (just simple scale + rotation), but I’m not sure whether it’s better to handle that through R3F’s built-in gesture events or let GSAP handle all the animations.

If you have any pointers on which approach is more stable for small interactive elements, or even better if you can guide me how to build that, I’d really appreciate it.
And totally agree, 3D is challenging, but the moment something finally works, it feels so rewarding. 😄

Collapse
 
shemith_mohanan_6361bb8a2 profile image
shemith mohanan •

Really enjoyed this breakdown! You explained the jump from 2D to 3D in such a simple way, especially the comparisons between Three.js, R3F, and A-Frame. The meme-style learning idea is fun too. Can’t wait to see the advanced 3D animation you’re working on next! 🚀🔥

Collapse
 
butch_imperial_dd21d71158 profile image
Butch Imperial •

Nice basic entry for 3D and 2D! I’m also starting to build my own portfolio with animation. This is great content for learning the basics!