Style: 3D Product Preview. Type: General. Keywords: 360 product view, rotatable, zoomable, touch-to-spin, AR preview, product configurator, interactive 3D model. Primary Colors: Product-dependent, neutral backgrounds: Soft Grey #E8E8E8, Pure White #FFFFFF. Secondary Colors: Shadow gradients, reflection planes, environment lighting colors, accent highlights. Effects & Animation: Drag-to-rotate, pinch-to-zoom, spin animation, AR placement, material switching, smooth orbit controls. Best For: E-commerce, furniture, fashion, automotive, electronics, jewelry, product configurators. Do Not Use For: Content-heavy sites, blogs, dashboards, low-bandwidth, accessibility-critical. Light Mode: ◐ Partial. Dark Mode: ◐ Partial. Performance: ❌ Poor (3D rendering). Accessibility: ⚠ Alt content needed. Mobile-Friendly: ◐ Medium. Conversion-Focused: ✓ Very High. Framework Compatibility: Three.js 10/10, model-viewer 10/10, Spline 9/10. Era/Origin: 2025+ E-commerce 3D. Complexity: High. AI Prompt Keywords: Design a 3D product preview interface. Use: 360° rotation, drag-to-spin, pinch-to-zoom, AR preview button, material/color switcher, hotspot annotations, orbit controls, product configurator, smooth rendering.. CSS/Technical: Three.js or model-viewer, OrbitControls, touch events for rotation, WebXR for AR, canvas with WebGL, loading placeholder, LOD for performance, environment lighting. Implementation Checklist: ☐ 3D model loads fast, ☐ Rotation smooth, ☐ Zoom works (pinch/scroll), ☐ AR button functional, ☐ Colors switchable, ☐ Mobile touch works. Design System Variables: --canvas-bg: #F5F5F5, --hotspot-color: #3B82F6, --loading-spinner: primary, --rotation-speed: 0.5, --zoom-min: 0.5, --zoom-max: 2.