3D Product Showcase

A studio-lit 3D product you can turn, zoom and finish — with camera presets and hotspots that stay pinned to the model. Built for product pages and launches.

threejs3dproductshowcaseinteractivewebglviewere-commerce

Open in playground Back to library

Live previewthreejs renderer

loading webgl…

source/3d-product-showcaselive mode

How it works

3 steps

Preview

See the authored component running live.

Customize

Open the playground to tune its controls.

Ship

Copy the TypeScript source and install what it needs.

Runtime package

Install the requirements

verified from renderer

These are the real runtime dependencies declared for this renderer. The product itself is not presented as a package until a published package exists.

npm install three^0.185.1 @react-three/fiber^9.7.0

three^0.185.1 · npm registry ↗@react-three/fiber^9.7.0 · npm registry ↗

Product contract

Renderer: threejs
Version: Not published
Preview: live
Controls: 0 authored controls
Source: 3d-product-showcase

Usage

Use the authored product, not a screenshot

This product is rendered as a live Three.js scene. The preview and exported source are driven by the same repository definition and renderer contract.

Stored product brief

A premium product showcase: an over-ear headphone lit by a three-point studio rig with a soft contact shadow, built from real geometry and physical materials. Drag to turn it, wheel or pinch to move in, and switch between midnight-copper, ivory-teal and coral-cream finishes that recolour the shell, the trim and the knurled ring while the ear cushions stay leather. Front, side, three-quarter and detail presets fly the camera; three hotspots project onto the model and keep their labels attached as it turns. Auto-rotation is opt-in, reset restores the opening frame, and the whole scene renders on demand so a still product costs no frames.

Source integrity

Traceable back to the registry

Registry source

3d-product-showcase

Public slug

3d-product-showcase

Renderer

threejs

Published version

Not published

Playground

Code, API, and integration

3d-product-showcase.tsxTypeScript

import { Canvas, useFrame } from "@react-three/fiber";
import { useRef } from "react";
import type { Group } from "three";

// 3D Product Showcase — SceneUI 3D export (React Three Fiber)
function Rig({ children }: { children: React.ReactNode }) {
  const ref = useRef<Group>(null);
  useFrame((_, delta) => {
    if (ref.current) ref.current.rotation.y += delta * 0.45 * 1;
  });
  return <group ref={ref} scale={1.000}>{children}</group>;
}

export function 3DProductShowcase() {
  return (
    <Canvas dpr={[1, 1.5]} camera={{ position: [0, 0, 4], fov: 45 }} style={{ background: "#07080b" }}>
      <ambientLight intensity={0.35} />
      <pointLight position={[3, 3, 3]} intensity={7.8} color="#8fb8ff" />
      <pointLight position={[-3, -2, -2]} intensity={4.4} color="#e7c9a3" />
      <Rig>
        {/* Paste the matching JSX for this design from the playground renderer,
            or open it in the editor and copy the live scene. */}
      </Rig>
    </Canvas>
  );
}

Nearby in the library

More 3d →

open