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）

显示版权

显示工具栏

显示天空

天空颜色

显示地面

地面颜色

网格线颜色

参数设置示例

通过设置参数可以调整背景、地面和摄像机等参数

正在加载模型……

正在加载模型……

其他示例

HDR 环境贴图示例

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