First Scene

Lesson 1

Three.js needs three things to show anything: a Scene (what exists), a Camera (where you’re looking from), and a Renderer (what draws pixels on screen). Everything else builds on this triangle.

Core Setup

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 100);
camera.position.z = 3;

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));

The Animation Loop

function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

Resize Handling

Always handle resize — otherwise the canvas distorts on window resize:

window.addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

What to Experiment With

  • Change PerspectiveCamera FOV (first arg) from 30–120 to see distortion
  • Try BoxGeometry(1,1,1) vs SphereGeometry(0.8, 32, 32) vs TorusGeometry(0.7, 0.3, 16, 100)
  • MeshBasicMaterial ignores light — swap to MeshNormalMaterial for instant color