模型查看器
模型查看器是MaxStudio团队开发的基于threejs的一款三维动画模型加载器。组件支持模型动画、pbr通道、环境贴图，配置光源等功能
**常用格式支持：**glb、gltf、fbx、obj、pmd、pmx、3ds、3mf
本文介绍模型查看器组件的基本使用及各配置项的含义
配置
相机配置
| 配置项 | 描述 |
|---|---|
| 相机类型 | 目前支持透视相机和正交相机，点击右侧下拉框可选择不同的相机类型透视相机：透视相机模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。正交相 机：在使用正交相机时，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。 |
| 视角 | 相机的fov值，只在相机类型为透视相机生效，范围: 0-180deg |
| 相机位置 | 调整相机在场景中的位置（X，Y，Z），可通过滑块拖动，输入框输入以及按钮点击三种方式进行设置， |
| 目标位置 | 调整相机的目标位置，在使用透视相机时，如果相机位置距离目标位置太近，效果可能不明显 |
模型配置
| 配置项 | 描述 |
|---|---|
| 模型地址 | 默认的模型地址，当数据配置中没有获取到模型地址时，便使用这里的默认地址加载模型 |
| 空模型文案 | 模型地址为空时显示的文案 |
| 一键居中 | 由于模型之间的尺寸不同，需要设置不同的相机位置和模型位置。可能出现切换模型后无法准确看到模型的情况，提供了模型一键居中按钮，点击后可让模型出现在屏幕中心，更加方便用户进行调整 |
| 显示模式 | 坐标轴：在场景中添加一个三位坐标轴，红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴. 线框模式：显示模型的纹路  pbr通道：模型查看器支持pbr通道显示模式，目前支持基础色、金属度和粗糙度  |
| 渲染效果 | 发射阴影：模型可以产生（发射）阴影效果。需要与投影平面配合使用 接收阴影：模型可以接收其他阴影效果。如果只注重在平面上显示模型阴影，可以关闭此选项以降低性能损耗  不透明度：通过滑块调整模型的不透明度，范围0~1  |
| 变换配置 | 位置：调整模型在场景中的位置（X，Y，Z）方向，取值范围 -500 |
动画配置
| 配置项 | 描述 |
|---|---|
| 模型动画 | 模型动画描述的是3D模型自身的动画效果。点击左侧图标 开启动画效果，即可播放模型动画，默认播放第一个针对具有多个动画的模型，可在下拉框中切换不同的动画 对于没有动画的模型，此配置不生效  |
| 绕轴旋转 | 绕轴旋转是一种通过控制模型在指定轴上旋转形成的动画效果，点击图标开启动画效果 可通过下拉选项框设置旋转轴（X，Y，Z)，默认绕Y轴旋转 此动画默认逆时针旋转，可店家顺时针开关开启顺时针旋转 可通过速度滑块设定旋转速度，范围1~3 |
| 扫光动画 | 点击图标开启扫光动画效果，呈现更炫酷的效果 **扫描轴向：**指定动画运动的方向（X，Y，Z）轴，默认正向，点击负方向开关可切换方向 **颜色：**点击颜色选项，可设置扫光动画的颜色 **强度：**通过拖动滑块设置光强度，越强扫光效果越明显 **速度：**拖动滑块设置动画的播放速度  |
环境配置
| 配置项 | 描述 |
|---|---|
| 背景 | 模型查看器提供了三种背景选择，可在环境配置-背景的下拉框中选择不同的背景方案 **无背景：**透明背景 **颜色：**选择颜色后，可在下方指定颜色作为模型的背景。 注：如果需要透明背景，请设置无背景选项，选择透明颜色会导致背景色变为黑色 **环境贴图：**选择环境贴图选项后，模型查看器提供默认贴图，也可在选项下方设置贴图地址  |
| 环境光 | 环境光作为基础光源，提供基础光照效果，均匀照亮场景中的物体，可设置颜色和光照强度，强度的取值范围1~10 |
| 平行光 | 平行光用于产生阴影效果，通常需要与渲染效果以及投影平面配合使用 平行光支持创建多个，支持颜色、光照强度以及位置的配置 **颜色：**设置平行光源的颜色 **光照强度：**设置平行光的强度值，取值范围1~10 **位置：**设置平行光在XYZ轴上的位置，可通过调整光源位置产生不同的阴影效果 |
| 投影平面 | 投影平面可用于接收模型的阴影，支持颜色、高度、尺寸和透明度配置 **颜色：**设置投影平面的颜色 **高度：**设置投影 平面在Y轴上的位置，需要针对模型大小进行调整，使投影平面能够更好的接收阴影，取值范围-500 **尺寸：**设置投影平面的半径，取值范围0 **不透明度：**设置投影平面的不透明度，取值范围0~1 |
后处理
后处理是一种结合数字图像处理技术对渲染画面输出到屏幕前进行再加工的技术，类似于滤镜
注：后处理相关功能对性能开销较大，可能造成卡顿
| 配置项 | 描述 |
|---|---|
| FXAA抗锯齿 | 模型查看器在渲染时已经启用了默认的抗锯齿，可根据需要开启FXAA抗锯齿，但是性能开销会比较到，对电脑性能有一定的要求 |
| AO阴影 | AO阴影通过计算像素之间的遮挡关系，增强边缘轮廓以及缝隙处阴影的明暗效果，以增强立体感 |
| 辉光 | 辉光可以增强画面的明暗对比度，画面中亮度越大的地方会产生外发光效果 目前辉光效果不支持与环境贴图同时使用  |
数据
字段说明
| 字段 | 说明 |
|---|---|
| url | 3D模型的url，与模型配置 > 模型地址配置项功能相同。如果同时配置，则以url中的内容为准 |
配置项说明
| 配置项 | 说明 |
|---|---|
| 数据源 | 点击数据源下拉框，可以修改数据源类型。详情请查看配置组件数据。 |
| 刷新数据 | 点击刷新数据，组件会按照设置请求最新数据。 |
| 查看响应数据 | 点击查看响应数据按钮，会将组件数据展示出来。 |
| 受控模式 | 打开开关，组件初始化状态下不请求数据，仅通过回调id或蓝图编辑器配置的方法发起请求数据；关闭开关，可以使用自动更新请求数据。 |
| 自动更新请求 | 选中后可以设置动态轮询，还可以手动输入轮询的时间频次。 |
交互
此组件没有交互事件。
蓝图编辑器交互配置
- 在画布编 辑器页面，右键单击组件，选择****导出到蓝图编辑器****。
- 单击页面左上角的蓝图图标。
- 在蓝图编辑器配置页面，单击导入节点栏内的****模型查看器****组件，在画布中可以看到如下图所示的模型查看器的蓝图编辑器配置参数。
事件
| 事件 | 说明 |
|---|---|
| 当数据接口请求完成时 | 数据接口请求返回并经过过滤器处理后抛出的事件，同时抛出处理后的JSON格式的数据。 |
| 当模型渲染完成时 | 当模型加载完成时抛出事件 模型渲染完成包括两种情况 1. 模型查看器首次加载，在模型渲染完成后抛出事件 2. 模型查看器导入数据接口，此时也会重新渲染模型 |
动作
| 动作 | 说明 |
|---|---|
| 播放模型动画 | 播放模型当前正在使用的动画，可提前设置，默认第一个，如果模型没有动画，则此动作无效 |
| 停止模型动画 | 停 止当前正在播放的模型动画，如果没有播放动画，则此动作无效 |
| 请求数据接口 | 重新请求服务端数据，上游数据处理节点或图层节点抛出的数据将作为参数。例如模型查看器配置了API数据源为[http://api.test/?id=:id](http://api.test/?id=:id)，传到请求数据接口动作的数据为{ id: '1'}，则最终请求接口为[http://api.test?id=1](http://api.test/?id=1)。 |
| 导入数据接口 | 按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据 |
| 更新组件配置 | 动态更新组件的样式配置。需要先在组件的配置面板中，单击复制配置到剪贴板，获取组件配置数据。再根据需要在蓝图编辑器配置页面的数据处理节点中更改对应样式的字段值。 |
| 显示 | 显示组件，不需要参数。 |
| 隐藏 | 隐藏组件，不需要参数。 |
| 切换显隐状态 | 切换组件显示或者隐藏。 |
| 移动 | 将组件移动到指定位置。``` {// 移动方式。绝对定位：to，相对定位：by。默认值：to。"positionType": "to",// 指定位置。x坐标，y坐标。"attr": {"x": 0,"y": 0},// 动画方式。"animation": {"enable": false,// 动画延时。"animationDuration": 1000,// 动画曲线。可选值为：linear|easeInOutQuad |