Mastering Three.js for Web

Creating 3D experiences on the web has never been more accessible, but performance optimization remains critical. Here's what we've learned building immersive WebGL experiences.

Why Three.js?

Three.js abstracts away the complexity of WebGL while giving you:

• Scene management: Cameras, lights, objects
• Material system: PBR, shaders, textures
• Performance helpers: Instancing, LOD, frustum culling
• Ecosystem: react-three-fiber, drei, post-processing

Performance Best Practices

1. Geometry Optimization

// ❌ Bad: Creating new geometry every frame
function animate() {
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  // ...
}

// ✅ Good: Reuse geometry
const geometry = new THREE.BoxGeometry(1, 1, 1);
function animate() {
  // Reuse the same geometry
}

2. Instancing for Repeated Objects

When rendering many similar objects (like particles), use InstancedMesh:

const count = 1000;
const mesh = new THREE.InstancedMesh(geometry, material, count);

const dummy = new THREE.Object3D();
for (let i = 0; i < count; i++) {
  dummy.position.set(x, y, z);
  dummy.updateMatrix();
  mesh.setMatrixAt(i, dummy.matrix);
}

3. Material Efficiency

• Reuse materials across meshes
• Minimize transparent materials (expensive)
• Use texture atlases to reduce draw calls

React Three Fiber Integration

For React developers, @react-three/fiber is a game-changer:

import { Canvas } from '@react-three/fiber';
import { Stars, Float } from '@react-three/drei';

function Scene() {
  return (
    <Canvas>
      <Stars />
      <Float>
        <mesh>
          <boxGeometry />
          <meshStandardMaterial color="purple" />
        </mesh>
      </Float>
    </Canvas>
  );
}

Real-World Example

Our homepage uses Three.js for the hero scene:

• 200+ particles with flow-field animation
• Instanced meshes for performance
• Mouse interaction with subtle parallax
• Graceful degradation on low-end devices

Conclusion

Three.js opens up incredible creative possibilities, but discipline is required. Always measure performance, optimize early, and remember: the best effect is one the user doesn't notice loading.

---

Interested in adding 3D to your site? Let's talk.