Interactive 360° Viewer

Interactive 360° Viewer

Default

Playground

PreviewUsageInstallation

Interactive 360° Viewer

Click and drag left or right to scrub through 72 high-res frames.

Loading 3D Model... 0%

Installation

Architecture

This component is designed to replace heavy WebGL/Three.js viewers for simple 360-degree product showcases. It works by preloading an array of standard image frames (e.g., .jpg or .webp) and intelligently swapping the src attribute based on mouse or touch drag distance.

Preloading Optimization

To guarantee a 60fps scrubbing experience without flickering, the component aggressively preloads every image in the array upon mount. It displays an internal loading spinner until all images are fully cached by the browser, ensuring a perfectly smooth rotation the moment the user interacts with it.

Usage Guide

1. Import the Component

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

import { Interactive360Viewer } from "@/components/creative/interactive-360-viewer";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { Interactive360Viewer } from "@/components/creative/interactive-360-viewer";

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