3D 写实3D & Hyperrealism
用真实光照、多层阴影与景深制造物理存在感，常配 WebGL 或高质量渲染图。视觉说服力强，但资源开销大，需要降级方案。
典型场景产品发布 · 硬件展示 · 品牌官网
编号05
年代2020s Modern
复杂度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
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
用真实光照、多层阴影与景深制造物理存在感，常配 WebGL 或高质量渲染图。视觉说服力强，但资源开销大，需要降级方案。
关键词
Depthrealistic textures3D modelsspatial navigationtactileskeuomorphic elementsrich detailimmersive
效果与动效
WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)
设计系统变量
--perspective1000px--parallax-layers5--lighting-intensityrealistic--shadow-depth20-40%--animation-duration300-400ms配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0
辅色 / Secondary
Complex gradients (5-10 stops), realistic lighting, shadow variations (20-40% darker)
强调色在页面底色上的对比度约 12.5:1，可用于正文与图标。
适用场景
适合 / Best For
- Gaming
- product showcase
- immersive experiences
- high-end e-commerce
- architectural viz
- VR/AR
避开 / Do Not Use For
- Low-end mobile
- performance-limited
- critical accessibility
- data tables/forms
框架兼容
threejsreact-three-fibercustom
能力矩阵
浅色模式有条件支持
深色模式有条件支持
移动适配不建议
转化导向中Medium
渲染成本高animation / large-images
无障碍风险高contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- WebGL/Three.js integrated,
- 3D models loaded,
- Parallax 3-5 layers,
- Realistic lighting verified,
- Complex shadows rendered,
- Physics animation smooth 300-400ms
CSS / 技术关键词
transform: translate3d, perspective: 1000px, WebGL canvas, Three.js/Babylon.js library, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow()
AI 提示词
Build an immersive 3D interface using realistic textures, 3D models (Three.js/Babylon.js), complex shadows, realistic lighting, parallax scrolling (3-5 layers), physics-based motion. Include skeuomorphic elements with tactile detail.