Hello Three.js

Hello Three.js

Three.js is a JavaScript library that makes 3D graphics in the browser accessible. It wraps WebGL — the raw GPU API — into a clean, high-level scene graph.

Every Three.js program rests on three pillars:

Scene — the world. You add objects to it.

const scene = new THREE.Scene();

Camera — the viewpoint. PerspectiveCamera mimics human vision with a field of view.

// PerspectiveCamera(fov, aspectRatio, near, far)
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
camera.position.z = 5;

Renderer — draws the scene from the camera's perspective onto a <canvas>.

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

Your First Object

A visible object is a Mesh = Geometry (shape) + Material (appearance).

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial(); // colorful, no lighting needed
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

The Render Loop

Everything is static until you animate it. requestAnimationFrame calls your function ~60 times per second:

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

Your Task

Implement createScene() that creates a scene, adds a BoxGeometry(1, 1, 1) mesh with MeshNormalMaterial, and returns the scene. Then set up the full renderer for the Preview.