3D Exploded View

Installation

Architecture & Disassembly Mechanics

3D Exploded View decomposes physical industrial design into individual procedural layers:

1. Layer Separation Kinetics: Each sub-assembly (Sapphire glass, bezel, AMOLED screen, neural PCB, battery, chassis, and biosensor array) receives individual proportional displacement factors with smooth spring damping (THREE.MathUtils.damp).
2. Spatial 3D HTML Pins: Powered by @react-three/drei's <Html>, annotation pins maintain spatial anchor coordinates in 3D world space while rendering high-DPI HTML callouts and responsive hover cards.
3. Interactive Control Modes: Can be driven externally via props (e.g. scroll progress or state) or directly manipulated through the built-in slider and orbit controls.

Usage Guide

1. Import the Component

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

import { ExplodedView3D } from "@/components/creative/exploded-view-3d";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ExplodedView3D } from "@/components/creative/exploded-view-3d";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ExplodedView3D
        explosionProgress{10}
        autoRotate{true}
        accentColor="example"
      >
        <div>Content goes here</div>
      </ExplodedView3D>
    </div>
  );
}