Three.js is the most widely used JavaScript library for 3D web graphics. It powers everything from Nike product configurators to NASA data visualizations to immersive marketing experiences. With over 100,000 GitHub stars and a decade of production use, it's the default choice when someone says "we need 3D on the web."
But there's a wide gap between a Three.js demo and a production Three.js experience. Demos load a model and spin it. Production experiences need to load fast on 4G connections, run at 60fps on mid-range phones, handle touch and mouse and keyboard input, degrade gracefully when WebGL fails, and be accessible to screen readers. This guide covers how to bridge that gap.
Why Three.js vs Other 3D Web Frameworks
Three.js
The generalist choice. Three.js wraps WebGL (and now WebGPU) in a high-level API that handles scene graphs, materials, lighting, geometry, and rendering. It's low-level enough to customize anything but high-level enough to be productive.
Ecosystem: Massive. Hundreds of examples, active community, extensive third-party plugins (postprocessing, physics via Cannon.js/Ammo.js/Rapier, loaders for every 3D format). Learning curve: Moderate. You need to understand 3D concepts (cameras, materials, transforms) but the API is well-documented.
Babylon.js (Microsoft)
A more opinionated framework with a built-in physics engine, GUI system, and inspector tool. Babylon excels at complex interactive scenes (games, simulations) where you want more out of the box.
Best for: Interactive applications where you need physics, collision detection, and GUI without adding third-party libraries. Also strong for WebXR (VR/AR in browser).
PlayCanvas
A cloud-based 3D engine with a visual editor. PlayCanvas compiles to highly optimized WebGL code and includes collaboration features for teams.
Best for: Teams that want a Unity-like editor experience for web projects. Good for games and advertisements.
React Three Fiber (R3F)
Not an alternative to Three.js — it's Three.js rendered through React's component model. You write Three.js scenes as JSX components with React state management, hooks, and lifecycle.
Best for: Teams that already use React and want to integrate 3D seamlessly into a React application. R3F is how most modern web applications integrate Three.js in 2026.
When Three.js Wins
Choose Three.js (directly or via R3F) when: - You need maximum control over rendering - Your project is a web-first experience (not a port from a game engine) - Your team has JavaScript/TypeScript expertise - You need the largest ecosystem of examples and community support - The experience needs to work on mobile browsers
Asset Optimization: The Make-or-Break Factor
A Three.js experience is only as fast as its assets load. The number one production problem is "it looks great on my MacBook but takes 30 seconds to load on a phone."
glTF: The Standard Format
glTF (GL Transmission Format) is the standard 3D format for the web. It's purpose-built for real-time delivery: compact binary encoding, GPU-ready data structures, and support for PBR materials, animations, and morph targets.
Always export in .glb (binary glTF) for production. Never use .obj or .fbx for web delivery — they're larger, slower to parse, and lack material information.
Draco Compression
Google's Draco library compresses glTF mesh data by 90-95%. A 10 MB model becomes 500 KB to 1 MB. Three.js includes a DRACOLoader that decompresses on the client using WebAssembly.
Setup: Host the Draco decoder WASM files on your CDN. Load them before your first model request. The decoder initializes in 50-100ms.
Tradeoff: Draco adds CPU decompression time on the client (100-500ms depending on model complexity). For hero models that load once, this is always worth it. For hundreds of small models loaded dynamically, benchmark to ensure decompression doesn't stall the main thread.
Texture Optimization
Textures are typically 70-80% of a 3D asset's file size. Production guidelines:
- -Use KTX2 with Basis Universal compression. KTX2 textures are GPU-compressed — they decompress on the GPU, not the CPU, and use 4-6x less GPU memory than PNG/JPEG. Three.js provides a KTX2Loader.
- -Resolution limits: 2048x2048 maximum for hero objects, 1024x1024 for standard objects, 512x512 for distant or small objects. Never load a 4096x4096 texture for a product that occupies 200 pixels on screen.
- -Channel packing: Combine roughness, metallic, and AO into a single RGB texture instead of three separate files. This reduces texture fetches and download size.
- -Mipmaps: Always generate mipmaps. Without them, small/distant objects cause texture shimmering (aliasing) and the GPU reads full-resolution textures for pixel-sized surfaces.
Polygon Budgets for Web
Web 3D runs on every GPU from integrated Intel UHD to dedicated RTX 4090. Target the low end:
- -Total scene: 100K-300K triangles for mobile, 500K-1M for desktop
- -Hero model: 20K-50K triangles
- -Background objects: 1K-5K triangles each
- -Environment: Use baked lighting and low-poly geometry with normal maps for detail
Progressive Loading: Show Something Fast
Users abandon web experiences that show a blank screen for more than 3 seconds. Progressive loading solves this by showing content in stages.
Loading Strategy
1. Instant (0-1s): Show the HTML shell — background color, loading indicator, branding. No 3D yet. 2. Fast (1-3s): Load and display a compressed hero model with basic lighting. Use a low-resolution placeholder texture. 3. Full (3-8s): Swap in high-resolution textures, load secondary models, enable post-processing. 4. Deferred (8s+): Load additional scenes, preload assets for the next interaction, initialize non-visible content.
Lazy Loading
Don't load everything at startup. Use intersection observers or scroll-based triggers to load 3D content only when the user scrolls to it. For multi-section marketing pages, this can reduce initial payload by 80%.
Asset Caching
Use Service Workers and Cache API to store glTF models and textures after first load. Returning users should see the experience instantly. Set cache expiry based on how frequently your assets change — typically 7-30 days for production assets.
Mobile Performance: The Real Constraint
More than 60% of web traffic is mobile. If your Three.js experience doesn't work on a mid-range Android phone, you've excluded the majority of your audience.
Mobile-Specific Optimization
Pixel ratio capping: Mobile screens have high pixel densities (3x, 4x) but mobile GPUs can't render at native resolution at 60fps. Cap the renderer's pixel ratio at 1.5-2.0:
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
Draw call budget: Each draw call is a CPU-to-GPU command. Mobile GPUs handle 100-200 draw calls efficiently. Desktop can handle 1,000+. Merge geometries, use instancing for repeated objects, and batch materials.
Shader complexity: Mobile GPUs have fewer shader cores and lower clock speeds. Limit fragment shader complexity — fewer texture samples, simpler math, avoid dependent texture reads. Use a simpler material (MeshStandardMaterial instead of custom shaders) on mobile if needed.
Thermal throttling: Like Quest VR, phones throttle under sustained GPU load. Design for 70-80% of peak GPU performance as your sustainable target. If the experience runs at 45fps after 30 seconds of sustained use, users on hot days or in warm rooms will have a worse experience.
Adaptive Quality
Detect device capability and adjust quality dynamically:
- -Check GPU renderer string via WebGL debug extension (WEBGL_debug_renderer_info)
- -Maintain an FPS counter — if frames drop below 30fps for 2+ seconds, reduce quality
- -Quality tiers: shadows on/off, post-processing on/off, texture resolution, geometry LOD
Accessibility in 3D Web
3D web content has historically been inaccessible. Production experiences need to address this.
Keyboard navigation: All interactive elements must be reachable via keyboard. Use focusable HTML overlays for buttons and controls rather than raycasting against 3D objects.
Screen reader support: Provide text descriptions for visual content. Use ARIA labels and live regions to announce state changes. A product configurator should announce "Color changed to midnight blue" when the user selects a color.
Motion sensitivity: Provide a "reduce motion" option that disables camera animations, particle effects, and auto-rotation. Respect the prefers-reduced-motion media query.
Alternative content: For users whose browsers don't support WebGL (rare but possible), provide static images or a simple HTML fallback.
Use Cases That Work Best on the Web
Product Configurators
The highest-ROI use case for Three.js in 2026. A 3D product configurator lets customers rotate, zoom, and customize products (shoes, furniture, cars, jewelry) in the browser. No app install, no download — just a URL.
Conversion rates for products with 3D configurators are 40-60% higher than static images. Shopify, IKEA, and Nike all use web 3D for product visualization.
Data Visualization
Three.js handles large-scale 3D data visualization that 2D charts can't convey: geographic data on globes, network graphs with thousands of nodes, scientific simulation output, and digital twin walkthroughs.
Libraries like deck.gl (built on top of WebGL) specialize in this, but custom Three.js implementations give you more visual control.
Marketing and Brand Experiences
Interactive landing pages, product launches, and brand storytelling. The web is the universal platform — no app download, works on every device, shareable via URL. Three.js experiences embedded in Next.js or Astro sites combine 3D with SEO, analytics, and the full web ecosystem.
Architectural Visualization
Real estate, interior design, and urban planning use web 3D for virtual walkthroughs. Clients can explore a building before it's built, from any device, via a link.
Education and Training
Interactive 3D models for anatomy, engineering, chemistry, and history. Web delivery means every student accesses the same experience without software installation.
React Three Fiber: The Modern Integration
For React-based projects (which is most modern web development), React Three Fiber is the recommended way to use Three.js. R3F treats Three.js objects as React components:
A camera, lights, and a mesh become JSX elements with props. State management, animations, and user interactions use React hooks (useFrame, useLoader, useGLTF from the drei helper library).
Benefits of R3F: - Declarative scene description (easier to read and maintain than imperative Three.js) - React's component model for reusable 3D elements - Built-in suspense support for asset loading - The drei library provides 100+ ready-made components (orbit controls, environment maps, text, HTML overlays in 3D) - Integrates naturally with Next.js, Remix, and other React frameworks
When to skip R3F: If your project doesn't use React, or if you're building a full 3D application (game, simulation) where React's reconciler overhead is unwelcome.
How WODH Builds Interactive Web Experiences
Our Creative Tech studio combines Three.js/R3F development with design and storytelling. We build product configurators, interactive marketing experiences, data visualizations, and 3D web applications — all optimized for mobile-first, production-grade deployment.
Every web 3D project we deliver is tested on low-end Android devices (not just the latest iPhone), loads progressively, and includes accessibility features. If you need 3D on the web that works for real users on real devices, we'd be glad to discuss your project.