Getting Started with Three.js

Web design is moving towards immersive 3D experiences. Three.js is the library making it possible.

Combined with React Three Fiber, you can build declarative 3D scenes effortlessly.

Start by installing Three.js via npm or a CDN. Create a scene, choose a camera (perspective for realistic depth, orthographic for isometric views), and instantiate the WebGLRenderer. Attach the renderer’s canvas to the DOM. The camera must be positioned; remember that positive Z moves away from the screen.

A Minimal Boilerplate

import * as THREE from 'three';

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

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

function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ```

A Mesh combines geometry (shape) and material (appearance). Three.js offers many built-in geometries: BoxGeometry, SphereGeometry, TorusKnotGeometry, etc. Materials range from basic MeshBasicMaterial (unlit, constant color) to MeshStandardMaterial (physically based rendering) and MeshPhongMaterial for shiny surfaces. Always use a light source with standard materials, or you’ll see a black screen.

Example:

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Lights bring a scene to life. AmbientLight illuminates everything evenly, DirectionalLight simulates sunlight casting shadows, and PointLight emits from a single point like a bulb. For realistic scenes, use a combination. React Three Fiber makes this declarative, mapping each light to a JSX element.

The `requestAnimationFrame` loop lets you animate properties like rotation or position. To add interaction, integrate OrbitControls (from three/examples) for mouse-driven camera rotation, zoom, and pan. Import them, attach to the camera and renderer’s DOM element, and update them in the loop.

Beginners often forget to add lights, use a camera with no near/far clipping planes correctly, or render only once instead of continuously. Always handle window resize to update camera aspect ratio and renderer size. Three.js opens a creative playground; once comfortable, explore shaders, post-processing, and 3D physics. The community and documentation are excellent—dive in and build something awesome.