3D 模型浏览 Model Viewer
浏览多种格式的三维模型
如何使用
安装
$ npm install @yhsoft/model-viewer
$ pnpm add @yhsoft/model-viewer
$ yarn add @yhsoft/model-viewer
导入
import { ModelViewer } from "@yhsoft/model-viewer";
代码演示
正在加载模型……
正在加载模型……
正在加载模型……
小提示：按住 Ctrl 键可用鼠标拖动模型。深度定制功能请微信联系（微信号：yh-soft）
显示版权
显示工具栏
显示天空
天空颜色
显示地面
地面颜色
网格线颜色
正在加载模型……
正在加载模型……
API
属性
Model Viewer 的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| source | 三维模型地址，为空时不加载模型 | string | '' | |
| options | 参数 | Object |
options 的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| background | 背景 | Object | ||
| camera | 摄像机 | Object | ||
| controls | 控制器 | Object | ||
| copyright | 版权信息 | Object | ||
| ground | 地面 | Object | ||
| model | 模型设置 | Object | ||
| toolbar | 工具栏 | Object |
background 的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| color | 背景颜色 | string | '#f6f6f6' | |
| urls | 背景设置，图片地址数组或者 HDR 文件地址 | Array，string | [] | 0.3.0 |
| visible | 是否显示背景，false 时背景透明 | boolean | true | 0.1.8 |
camera 的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| fov | 摄像机视锥体垂直视野角度 | number | ||
| near | 摄像机视锥体近端面 | number | ||
| far | 摄像机视锥体远端面 | number | ||
| position | 摄像机位置 | Object | { x: 45, y: 25, z: 45 } |
controls 的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autoRotate | 自动旋转 | boolean | false | |
| autoRotateSpeed | 自动旋转速度 | float | 1.0 | |
| enableRotate | 启动或禁用摄像机旋转 | boolean | ||
| enablePan | 启用或禁用平移 | boolean | true | |
| enableZoom | 启用或禁用缩放 | boolean | true |
ground 的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| visible | 是否显示地面 | boolean | true | |
| color | 地面颜色 | string | '#ffffff' | |
| grid | 网格线 | Object | {} |
model 的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| up | 模型向上轴 | 'Y' 'Z' | 'Y' | |
| materialPath | 材质贴图路径 | string | ||
| draco | 模型是否启用 Draco 解压缩 | Object | 0.3.0 |
draco 的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| enable | 是否启用解压缩 | boolean | false | 0.3.0 |
| path | draco 路径 | string | 'draco/gltf' | 0.3.0 |
toolbar 的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| visible | 是否显示工具条 | boolean | true |
grid 的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| color | 网格颜色 | string | ||
| divisions | 网格线间隔 | number | 100 | |
| opacity | 网格线透明度 | number | 0.3 | |
| size | 大小 | number | 1000 |