Three.js without the pain: a designer's guide
How to tackle your first 3D scene in the browser without getting lost in matrices or glsl. We start with the render loop and end with a spinning mango.
Three.js is intimidating because it mixes maths (matrices, quaternions) with scene graphs, shaders and a render loop you have to maintain yourself. But 90% of the creative work happens with high-level APIs: load a GLTF, position a camera, add lights, animate with GSAP.
Step one is to mentally structure the scene: Scene > Camera > Mesh(es). The camera looks at a target; the mesh has a geometry and a material. The render loop just repeats renderer.render(scene, camera) 60 times per second.
To feel quick progress, jump straight to GLTFLoader. Grab a model from Sketchfab or Poly Haven, load it, place it at the origin and rotate it in the tick. In 20 lines you've got a 3D object spinning with PBR lighting.
When curiosity kicks in, open the shaders. Don't start with complex ones: edit the fragment shader of a MeshBasicMaterial and play with gl_FragColor. Five minutes messing with sin(time) will already feel like a brand new universe.
Work with JMWEB
Let's build something with personality.
It all starts with a conversation. Bring a brief, a reference, a half-baked idea — I'll take it from there.
Start a project
