I have always been fascinated by the magical perspective of 3D websites, and I recently started learning Three.js. It’s such a fun and powerful way to bring 3D into web development!
I’m not an expert (yet 😅), but I thought it would be cool to document my learning journey through blogs.

If you know basic JavaScript and have been curious about 3D stuff, come along — let’s learn together!

📚 What You Need to Know Before Starting

  • Basic JavaScript (variables, arrow functions, a little about classes, basic ES6 features).

  • Basic HTML/CSS.

  • That’s it! No prior 3D experience needed. (Trust me, I didn’t have any either.)

🛠 Setting Up a Basic Three.js Project

I started super simple — no complicated tools.

Step 1: Basic HTML Setup

My First Three.js Project
  body { margin: 0; }







    Enter fullscreen mode
    


    Exit fullscreen mode
    




Step 2: Add Three.js to the Project
You can either add a CDN link directly:





    Enter fullscreen mode
    


    Exit fullscreen mode
    




or, if you’re comfortable using npm:

npm install three



    Enter fullscreen mode
    


    Exit fullscreen mode
    




I used the CDN for my first try — faster setup!
  
  
  🖼️ Building the Basic 3D Scene
From what I understood, in Three.js, you usually need three main things to start:
Scene (like a stage)
Camera (your viewer’s eye)
Renderer (to actually draw stuff)
Here’s the code I wrote after watching a few tutorials:

// 1. Create the scene
const scene = new THREE.Scene();

// 2. Create the camera
const camera = new THREE.PerspectiveCamera(
  75, 
  window.innerWidth / window.innerHeight, 
  0.1, 
  1000
);
camera.position.z = 5;

// 3. Create the renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  🧱 Adding My First 3D Object (A Cube!)
After setting up the scene, I wanted to add something visible. I made a simple green cube:

const geometry = new THREE.BoxGeometry(); // Shape
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Looks
const cube = new THREE.Mesh(geometry, material); // Combine shape + look
scene.add(cube); // Add to the scene



    Enter fullscreen mode
    


    Exit fullscreen mode
    




When I ran this, there it was — my little green box floating in space 🧑‍💻.
  
  
  🚀 What’s Next?
Now that I can create a basic scene, here’s what I plan to explore next:
Adding lights (right now the cube looks flat).
Playing with textures.
Loading 3D models (.glb or .gltf files).
Using OrbitControls (to move around the scene with the mouse).
I’ll be writing separate blogs as I figure these things out — stay tuned if you’re learning too!