Three.js Interview Questions to Ask Before You Hire

12 Three.js interview questions — with what to listen for

1. 1

   Walk me through the core Three.js object model — scene, camera, renderer, meshes, materials, geometries — and what the render loop does each frame.

   What a strong answer covers

   The scene graph with hierarchical transforms, camera projection, renderer issuing WebGL draw calls per visible mesh, and the requestAnimationFrame loop updating and rendering. Fluency here is baseline; hesitation predicts copy-paste-driven experience.

2. 2

   What is a draw call, why do draw calls dominate performance, and what are your tools for reducing them?

   What a strong answer covers

   CPU-GPU command overhead per mesh/material pair; reduction via merged geometries, instanced meshes for repeated objects, texture atlases enabling material sharing, and frustum culling awareness. InstancedMesh with a concrete before/after count is the practitioner's answer.

3. 3

   A Three.js scene runs at 20fps on a mid-range laptop. Describe your full diagnostic process.

   What a strong answer covers

   Determine CPU-bound versus GPU-bound first (profiler, resolution-scaling test), then inspect draw calls and triangle counts (renderer.info), overdraw from transparency, shadow-map costs, texture sizes, and per-frame allocation causing GC hitches. Spector.js or GPU profilers named, ordered method, measurable targets.

4. 4

   How does memory management work in Three.js — what leaks, and what does proper disposal look like?

   What a strong answer covers

   GPU resources (geometries, materials, textures, render targets) are not garbage collected with their JS objects; explicit dispose() on removal, event-listener cleanup, and leak detection via renderer.info counts over navigation cycles. This is the classic production leak — firsthand experience shows immediately.

5. 5

   Explain the asset pipeline you would set up for product or scene models arriving from artists — formats, compression, and loading strategy.

   What a strong answer covers

   glTF/GLB as the standard, Draco or Meshopt geometry compression, KTX2/Basis texture compression for GPU-native formats, LOD generation, and progressive or lazy loading with placeholders. A pipeline framing — automated optimization, artist feedback on budgets — beats file-format recall.

6. 6

   How far does your shader knowledge go — walk me through a custom shader or material modification you have written and why it was needed.

   What a strong answer covers

   GLSL vertex/fragment basics, uniforms and varyings, ShaderMaterial or onBeforeCompile modification of built-ins, and a genuine use case: custom dissolve effects, vertex displacement, special fresnel looks. Depth varies by role, but zero shader literacy caps what they can build.

7. 7

   Compare lighting approaches — dynamic lights and shadows versus baked lighting and environment maps — and how you choose for a product configurator versus a game-like scene.

   What a strong answer covers

   Dynamic shadow cost scaling with lights and resolution; baked lightmaps and HDR environment maps (IBL) giving cheap realism for static scenes; configurators favoring environment lighting with minimal dynamic shadow. PBR material workflow understanding threads through the answer.

8. 8

   How do you integrate Three.js into a React application, and what does React Three Fiber change?

   What a strong answer covers

   R3F expressing the scene graph declaratively with React lifecycle managing objects, hooks ecosystem (drei), and the trade-offs: reconciler overhead considerations, escape hatches to imperative code for hot paths, and keeping per-frame logic out of React state. Knowing state updates per frame are the R3F anti-pattern is the key marker.

9. 9

   What are your strategies for making a 3D experience responsive and accessible — different devices, input methods, and reduced-motion users?

   What a strong answer covers

   Pixel-ratio capping, quality tiers by device capability, touch and pointer abstraction, resize handling, DOM fallbacks or static renders for unsupported contexts, and prefers-reduced-motion respect. Treating 3D as progressive enhancement demonstrates production maturity beyond demo work.

10. 10

    Explain raycasting for interaction — how it works and where it gets expensive — plus an alternative picking technique.

    What a strong answer covers

    Ray from camera through pointer intersecting objects; cost from testing many or high-poly meshes, mitigated by target lists, bounding-volume early-outs, or BVH acceleration. GPU picking via color IDs as the alternative. Interaction is where portfolio pieces become products, so this is practical, not academic.

11. 11

    Where do you run heavy computation for a Three.js app — particles, physics, procedural generation — without killing the frame rate?

    What a strong answer covers

    Web workers (with OffscreenCanvas where it fits) for CPU work, GPGPU techniques for particles, physics engines stepped in workers, time-slicing generation across frames, and budget honesty about what belongs precomputed. Frame-budget arithmetic (16ms) said out loud is a good sign.

12. 12

    A client wants their entire e-commerce catalog viewable in 3D. What do you push back on, and what does a realistic version look like?

    What a strong answer covers

    Business judgment: per-model production cost, device support floor, loading budgets, and a phased proposal — hero products first, one optimized pipeline, measurable engagement goals. The ability to scope 3D realistically is precisely what distinguishes a hireable specialist from a demo artist.

Frequently asked questions