🚀 Getting Started with Three.js: Building My First 3D Scene

Akashjeet MItra — Sun, 27 Apr 2025 15:31:06 +0000

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Three.js Project</title>
  <style>body { margin: 0; }</style>
</head>
<body>
</body>
</html>

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

<script src="https://unpkg.com/three@latest/build/three.min.js"></script>

or, if you’re comfortable using npm:

npm install three

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);

🧱 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

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: