Building Three.js Product Visualizations

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

function ProductViewer({ modelPath }) {
  const { scene } = useGLTF(modelPath)
  
  return (
    <Canvas camera={{ position: [5, 2, 5], fov: 45 }}>
      <Environment files="/hdri/studio_small_03_1k.hdr" />
      <directionalLight position={[10, 10, 5]} intensity={0.5} />
      <ambientLight intensity={0.2} />
      <Suspense fallback={null}>
        <primitive object={scene} />
      </Suspense>
      <OrbitControls enablePan={false} maxPolarAngle={Math.PI / 2} />
    </Canvas>
  )
}

Progress:

• Set up scene foundation (renderer, camera, controls)
• Configure lighting rig with HDRI + directional balance
• Optimize GLTF models (Draco compression, LOD)
• Implement scroll animations with GSAP ScrollTrigger
• Build React Three Fiber component architecture
• Add lazy loading for performance
• Test conversion-focused interactions

1. Scene Foundation Setup

JavaScript
// Canvas configuration for B2B product demos
<Canvas
  gl={{ antialias: true, alpha: true }}
  camera={{ position: [5, 2, 5], fov: 45 }}
  dpr={[1, 2]}
>
  <OrbitControls
    enablePan={false}
    enableZoom={true}
    maxPolarAngle={Math.PI / 2}
    minDistance={3}
    maxDistance={15}
  />
</Canvas>

2. Lighting Rig for Product Showcases

JavaScript
function ProductLighting() {
  return (
    <>
      {/* HDRI environment for realistic reflections */}
      <Environment files="/hdri/studio_small_03_1k.hdr" />
      
      {/* Key light - directional */}
      <directionalLight 
        position={[10, 10, 5]} 
        intensity={0.5}
        castShadow
        shadow-mapSize={[2048, 2048]}
      />
      
      {/* Fill light - ambient */}
      <ambientLight intensity={0.2} />
      
      {/* Rim light for edge definition */}
      <directionalLight position={[-5, 5, -5]} intensity={0.3} />
    </>
  )
}

3. Model Optimization Strategy

Bash
# Draco compression (reduce file size 60-80%)
gltf-pipeline -i model.gltf -o model-compressed.glb --draco.compressionLevel 10

# Generate LOD versions
gltf-pipeline -i model.gltf -o model-low.glb --meshopt.simplification.ratio 0.5

JavaScript
function OptimizedModel({ modelPath, distance }) {
  const lowRes = useGLTF(`${modelPath}-low.glb`)
  const highRes = useGLTF(`${modelPath}.glb`)
  
  return (
    <Lod distances={[15, 25, 35]}>
      <primitive object={highRes.scene} />
      <primitive object={lowRes.scene} />
      <mesh /> {/* Fallback placeholder */}
    </Lod>
  )
}

4. Scroll-Linked Camera Animation

JavaScript
import { useLayoutEffect, useRef } from 'react'
import { useThree } from '@react-three/fiber'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

function ScrollCameraRig() {
  const { camera } = useThree()
  const timeline = useRef()
  
  useLayoutEffect(() => {
    timeline.current = gsap.timeline({
      scrollTrigger: {
        trigger: ".product-section",
        start: "top center",
        end: "bottom center",
        scrub: 1
      }
    })
    
    // Product reveal animation
    timeline.current
      .to(camera.position, { x: 0, y: 3, z: 8, duration: 1 })
      .to(camera.position, { x: -5, y: 2, z: 5, duration: 1 })
      .to(camera.position, { x: 5, y: 1, z: 3, duration: 1 })
      
    return () => timeline.current?.kill()
  }, [camera])
  
  return null
}

5. Component Architecture

JavaScript
// ProductVisualization.jsx
function ProductVisualization({ product, interactive = true }) {
  return (
    <div className="product-visualization">
      <Canvas>
        <Suspense fallback={<ProductLoader />}>
          <ProductScene product={product} />
          <ProductLighting />
          {interactive && <ProductInteractions />}
          <ScrollCameraRig />
        </Suspense>
      </Canvas>
      <ProductControls product={product} />
    </div>
  )
}

// ProductScene.jsx
function ProductScene({ product }) {
  const { scene } = useGLTF(product.modelPath)
  
  return (
    <group>
      <primitive object={scene} />
      <ProductMaterials variants={product.variants} />
      <ProductAnnotations features={product.features} />
    </group>
  )
}

6. Lazy Loading Implementation

JavaScript
import { lazy, Suspense } from 'react'

const ProductVisualization = lazy(() => import('./ProductVisualization'))

function ProductSection() {
  const [loadVisualization, setLoadVisualization] = useState(false)
  
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setLoadVisualization(true)
      }
    })
    
    observer.observe(document.querySelector('.product-trigger'))
    return () => observer.disconnect()
  }, [])
  
  return (
    <section className="product-section">
      <div className="product-trigger" />
      {loadVisualization && (
        <Suspense fallback={<div>Loading 3D Experience...</div>}>
          <ProductVisualization />
        </Suspense>
      )}
    </section>
  )
}