Three.js From Zero · Article s15-06

Three.js Interview Prep

Three.js Interview Prep is Article s15-06 of Three.js From Zero, a MasterAllArts free interactive lesson for artists learning creative 3D on the web.

← Three.js From ZeroS15-06 · Portfolio & Career

Season 15 · Article 06 · Portfolio & Career

The real questions teams ask when hiring for a Three.js role. Whiteboard problems, system design, portfolio presentation. Patterns to know cold and the meta-skill of demoing your work in five minutes.

The interview shape

Three.js roles typically have 3–4 rounds:

  1. Phone screen / take-home — basic Three.js literacy.
  2. Live coding — build something small in 60 minutes (a raycaster picker, a particle system, etc.).
  3. Portfolio walkthrough — present your work, answer questions on it.
  4. System design — "design a configurator that supports 100 products and 50 concurrent users."

The questions you'll be asked

Fundamentals:

  • Difference between BufferGeometry and Geometry?
  • What's a scene graph?
  • What's the role of the renderer vs the scene vs the camera?
  • Difference between PerspectiveCamera and OrthographicCamera?
  • What does scene.add() do under the hood?

Materials & lighting:

  • When would you use MeshBasicMaterial vs MeshStandardMaterial?
  • What's PBR? Metalness vs roughness?
  • How do environment maps work? IBL?
  • What's the difference between AmbientLight and HemisphereLight?
  • Why is shadow setup so finicky?

Performance:

  • How do you debug a slow scene?
  • When would you use InstancedMesh?
  • What's LOD?
  • How do shadow maps work? What's PCF?
  • Why are draw calls expensive?

Shaders:

  • Difference between vertex and fragment shaders?
  • What's a varying? Uniform? Attribute?
  • How would you write a "ripple from mouse" effect?
  • What's onBeforeCompile for?
  • How does additive blending work?

Live coding: the raycaster problem

"Build a scene with 10 cubes. Click one to highlight it."

The expected pattern:

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

canvas.addEventListener('click', (e) => {
  const r = canvas.getBoundingClientRect();
  ndc.x = ((e.clientX - r.left) / r.width) * 2 - 1;
  ndc.y = -((e.clientY - r.top) / r.height) * 2 + 1;
  raycaster.setFromCamera(ndc, camera);

  const hits = raycaster.intersectObjects(cubes, false);
  // Reset all
  cubes.forEach(c => c.material.color.set('white'));
  // Highlight first hit
  if (hits[0]) hits[0].object.material.color.set('hotpink');
});

20 lines. They'll ask follow-ups: "What if cubes share a material?" (clone it). "What about touch events?" (pointerdown). "How would you do GPU picking instead?" (render to a separate ID-color buffer).

System design: the configurator

"Design a product configurator for a furniture brand. They have 50 products, each with 20 customizable options. Up to 1000 concurrent users."

What they're testing:

  • Asset strategy — Draco + KTX2 compression, CDN, on-demand streaming.
  • Customization model — separate meshes vs blend shapes vs material swaps. Trade-offs.
  • State management — URL params for shareable configurations.
  • Mobile — DPR cap, shadow tradeoffs, fewer particles.
  • CMS integration — content team adds products without dev help. JSON-driven scene definitions.
  • Performance budget — bundle size, FCP, LCP, interaction.

Portfolio walkthrough

You'll have 10-15 minutes. Format:

  1. 30s intro — "I built [X]. The interesting thing is [Y]."
  2. Demo — show it running, not just screenshots.
  3. Decision points — "I picked R3F because X. I optimized this part because Y." Three decisions per project, max.
  4. What you'd do differently — show self-awareness. Senior engineers reflect.
  5. Questions invited — "What part do you want to dig into?"

Demo-in-5-minutes

Have a 5-minute version of your top 3 projects ready. Practice it. Pre-load the URLs. Have your laptop's screen sharing set up.

The single biggest mistake: spending 4 of 5 minutes on setup ("Let me start the dev server, let me find the right tab"). Open the live URL of your deployed work — that's why deployment matters.

Common first-time pitfalls

"Live-coded in vanilla Three.js when they wanted R3F (or vice versa)." Ask before you start. "Do you have a preference between vanilla and R3F for this exercise?"
"Couldn't explain why I picked X." Every decision in your portfolio should have a reason. If you can't articulate it, the answer is "it was the first thing I tried" — and that's the answer interviewers want, honestly given.
"Bombed the systems question by trying to design everything." They want you to ask clarifying questions, then design at a high level. "Before I dive in, what's the budget? Mobile-first or desktop-first? What's our perf target?" Time spent gathering requirements = points scored.

Exercises

  1. Mock interview yourself. Record a 15-minute portfolio walkthrough. Watch it back. Notice the filler words, the missing reasons, the spots you skipped. Re-record.
  2. Speed-run the raycaster problem. 20 minutes, blank IDE, no Google. Aim for working code. Reset, repeat next week.
  3. Write your STAR stories. Three project stories in STAR format (Situation, Task, Action, Result). Read them aloud. They should sound natural, not memorized.