用途
3D Visualizer 是一个专注于 Three.js、3D 图形与交互式 3D 可视化的技能，用于帮助创建 3D 可视化、交互式 3D 图形和沉浸式网页体验。
主要能力
3D 图形
- 3D 模型和场景
- 材质和光照
- 动画和交互
- 相机控制
3D 数据可视化
- 3D 图表和图形
- 网络可视化
- 地理空间数据
- 科学可视化
交互式 3D
- 产品查看器（360°）
- 配置器
- 交互式演示
- 3D 游戏
使用方式
该技能基于 Three.js 与 React Three Fiber，安装命令为：
npm install three @react-three/fiber @react-three/drei
资料提供了多个可直接参考的代码示例，涵盖以下场景：
基础 3D 场景
使用 Canvas、OrbitControls、Box、Sphere 等组件搭建包含光照、3D 对象与相机控制的基础场景。
3D 模型加载器
使用 useGLTF 加载 /models/product.glb 模型，并通过 OrbitControls 设置缩放、平移与极角限制，用于产品查看器。
动画 3D
使用 useRef 与 useFrame 实现旋转立方体动画。
3D 图表（柱状图）
通过 Bar3D 组件与 Text 组件构建 3D 柱状图，示例数据为按月销售额。
交互式 3D 产品配置器
通过 useState 管理颜色选择，结合 Canvas 与 OrbitControls 实现可切换颜色的产品配置器。
3D 网络图
使用 Line 组件连接节点，构建包含节点与边的 3D 网络图。
性能优化
提供 Instanced Mesh 示例，用于渲染大量对象（如粒子系统），通过 setMatrixAt 与 instanceMatrix.needsUpdate 更新实例矩阵。
适用场景
资料明确列出适合的场景：
- 构建 3D 产品查看器
- 创建数据可视化
- 交互式 3D 体验
- 科学可视化
- 3D 游戏原型
该技能可帮助：
- 设置 Three.js 项目
- 加载 3D 模型
- 创建交互式 3D
- 优化 3D 性能
- 构建 3D 图表
限制
资料未提供关于收费、价格、平台支持范围、浏览器兼容性或具体性能指标的信息，暂未提供。