Three.js · 1 / 6

Dashboard
Creative coding · Three.js

Scene, camera, mesh — live

Three.js wraps WebGL so you describe a scene, add a camera and renderer, then place meshes (geometry + material). The animation loop updates transforms each frame — ideal for creative coding on mobile or desktop when you keep canvases responsive.

Demos run inside an iframe with resized canvas — drag works only inside the demo when we add controls later.

// Building blocks (conceptual)
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

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

Cap devicePixelRatio on phones so animations stay smooth.

Next steps

OrbitControls, GLTF loaders, post-processing — same scene/graph ideas.