3D 产品预览3D Product Preview
可拖拽旋转、缩放、换材质的产品模型，配中性背景与柔和投影。让用户在购买前「转一圈」，加载与降级是主要挑战。
典型场景电商 · 汽车/家具配置器 · 硬件
编号64
年代2025+ E-commerce 3D
复杂度High
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
可拖拽旋转、缩放、换材质的产品模型，配中性背景与柔和投影。让用户在购买前「转一圈」，加载与降级是主要挑战。
关键词
360 product viewrotatablezoomabletouch-to-spinAR previewproduct configuratorinteractive 3D model
效果与动效
Drag-to-rotate, pinch-to-zoom, spin animation, AR placement, material switching, smooth orbit controls
设计系统变量
--canvas-bg#F5F5F5--hotspot-color#3B82F6--loading-spinnerprimary--rotation-speed0.5--zoom-min0.5--zoom-max2配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Product-dependent, neutral backgrounds: Soft Grey #E8E8E8, Pure White #FFFFFF
辅色 / Secondary
Shadow gradients, reflection planes, environment lighting colors, accent highlights
强调色在页面底色上的对比度约 3.3:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- E-commerce
- furniture
- fashion
- automotive
- electronics
- jewelry
- product configurators
避开 / Do Not Use For
- Content-heavy sites
- blogs
- dashboards
- low-bandwidth
- accessibility-critical
框架兼容
threejsmodel-viewerspline
能力矩阵
浅色模式有条件支持
深色模式有条件支持
移动适配需额外处理
转化导向极强Very High
渲染成本高animation / large-images
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- 3D model loads fast,
- Rotation smooth,
- Zoom works (pinch/scroll),
- AR button functional,
- Colors switchable,
- Mobile touch works
CSS / 技术关键词
Three.js or model-viewer, OrbitControls, touch events for rotation, WebXR for AR, canvas with WebGL, loading placeholder, LOD for performance, environment lighting
AI 提示词
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.