Build Immersive 3D Web Experiences

This skill acts as a 3D Web Experience Architect, covering Three.js, React Three Fiber, Spline, WebGL, GLSL shaders, model preparation, and 3D optimization for product configurators, 3D portfolios, and immersive websites - balancing visual impact with performance and usability rather than 3D for its own sake.

It guides stack selection with a comparison table (Spline for quick prototypes with a low learning curve, React Three Fiber for React apps and complex scenes, vanilla Three.js for maximum control outside React, Babylon.js for games and heavy 3D) and a decision tree that routes to Spline for a quick element, React Three Fiber inside a React app, or vanilla Three.js when maximum performance and control are required. A basic React Three Fiber scene loads and displays a GLTF model:

import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';

function Model() {
  const { scene } = useGLTF('/model.glb');
  return <primitive object={scene} />;
}

export default function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <Model />
      <OrbitControls />
    </Canvas>
  );
}

For model preparation it compares formats (GLB/GLTF as the standard, smallest web format; FBX from 3D software; OBJ for simple meshes; USDZ for Apple AR) and defines an optimization pipeline: reduce poly count below 100K for web, bake and combine textures, export as GLB, then compress with gltf-transform using Draco compression and WebP texture compression, targeting under 5MB. It also covers loading states with Suspense and useProgress, scroll-driven 3D (rotating a model based on scroll offset via ScrollControls, or driving camera position with GSAP's ScrollTrigger), and performance targets by device (60fps/500K triangles desktop, 30-60fps/100K mobile, 30fps/50K low-end), plus concrete performance techniques: instancing repeated objects, limiting lights, using Level of Detail, lazy-loading models, lowering device pixel ratio on mobile, and falling back to a static image when WebGL isn't supported.

Built-in validation checks flag missing loading indicators (high severity), missing WebGL fallback, uncompressed models, OrbitControls capturing scroll events, and DPR set too high on mobile - each with a specific fix action.

Use it when the task mentions a 3D website, Three.js, WebGL, React Three Fiber, Spline, a 3D experience, or a product configurator. It delegates scroll/parallax/GSAP work to a scroll-experience skill, React/Next integration to a frontend skill, performance issues to a performance-hunter skill, and product/landing pages to a landing-page-design skill - working well alongside scroll-experience, interactive-portfolio, frontend, and landing-page-design.

Output is working 3D scene code (React Three Fiber, Spline embed, or vanilla Three.js), a model optimization pipeline, and performance/fallback safeguards. Two named workflows: a product configurator (prepare the model, build the R3F scene, add color/variant interactivity, integrate with the product page, optimize for mobile, add fallback images) and an immersive portfolio (design the scene concept, build in Spline or R3F, add scroll-driven animation, integrate with portfolio sections, ensure mobile fallback, optimize performance).

Frontend and creative developers building 3D product configurators, immersive portfolios, or marketing sites who need working, performance-conscious 3D implementations rather than raw WebGL from scratch.