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
ground	地面	Object

background 的属性说明如下：

属性	说明	类型	默认值	版本
color	背景颜色	string	'#f6f6f6'
skyBox	天空盒，图片地址数组	数组	[]	0.1.8
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	{}