Three.js Has a Free API That Puts 3D Graphics in Any Web Browser

#javascript #threejs #webdev #3d

Three.js is the 3D library that powers thousands of immersive web experiences. Its API gives you WebGL, WebGPU, and physics — all in JavaScript.

Scene Setup: 3D in 10 Lines

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

camera.position.z = 5;

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

Geometry + Materials API

// Built-in geometries
const box = new THREE.BoxGeometry(1, 1, 1);
const sphere = new THREE.SphereGeometry(1, 32, 32);
const torus = new THREE.TorusKnotGeometry(1, 0.3, 100, 16);

// PBR Materials
const material = new THREE.MeshStandardMaterial({
  color: 0x3498db,
  metalness: 0.7,
  roughness: 0.2,
  envMap: envTexture,
});

const mesh = new THREE.Mesh(box, material);
mesh.castShadow = true;
scene.add(mesh);

Lighting System

// Ambient light (base illumination)
scene.add(new THREE.AmbientLight(0x404040, 0.5));

// Directional light (sun)
const sun = new THREE.DirectionalLight(0xffffff, 1);
sun.position.set(5, 10, 7);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
scene.add(sun);

// Point light (lamp)
const lamp = new THREE.PointLight(0xff6600, 1, 10);
lamp.position.set(0, 3, 0);
scene.add(lamp);

// Spotlight
const spot = new THREE.SpotLight(0xffffff, 1, 20, Math.PI / 6, 0.5);
spot.target = mesh;
scene.add(spot);

GLTF Loader: 3D Models

import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("/draco/");

const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);

const gltf = await loader.loadAsync("/models/robot.glb");
const model = gltf.scene;
model.scale.set(0.5, 0.5, 0.5);
scene.add(model);

// Play animations
const mixer = new THREE.AnimationMixer(model);
const action = mixer.clipAction(gltf.animations[0]);
action.play();

Raycasting: Mouse Interaction

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

window.addEventListener("click", (event) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children, true);

  if (intersects.length > 0) {
    const object = intersects[0].object;
    object.material.color.setHex(Math.random() * 0xffffff);
  }
});

Post-Processing

import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85));

// In animation loop:
composer.render();