Interactive 3D Customizer

Installation

You will need to install the Three.js ecosystem:

npm install three @react-three/fiber @react-three/drei

Usage

import { ProductCustomizer } from "@/components/creative/product-customizer";

export default function Page() {
  return (
    <div className="w-full max-w-6xl mx-auto">
      <ProductCustomizer />
    </div>
  );
}

How it works

This component merges standard React state (useState) with the React Three Fiber (useFrame) render loop to create a highly optimized interactive 3D experience.

1. State Management: The UI sidebar uses standard React state to track the active hex colors for the base, accent, and core materials.
2. Animation Loop: Instead of abruptly snapping to a new color when a user clicks a swatch, we pass the hex color down to an AnimatedMaterial component. Inside that component, a useFrame hook continuously calls Three.js's native .lerp() function to smoothly blend the current material color into the target material color at 60fps.
3. Environment & Lighting: We use @react-three/drei's Environment preset ("city") to provide realistic HDRI lighting and reflections on the metallic surfaces. The ContactShadows component renders a realistic, blurring shadow directly underneath the floating geometry.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ProductCustomizer } from "@/components/creative/product-customizer";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ProductCustomizer } from "@/components/creative/product-customizer";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ProductCustomizer
      />
    </div>
  );
}