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

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:

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!

DEV Community