探索三维可视化大屏的奥秘：场景模型glTF查看器全攻略

在三维的数字艺术殿堂中，三维模型与材质的设计如同精心雕琢的宝石，闪烁着独特的光华。作为三维设计师的我们，在三维可视化项目中我们也是一样执着自己作品高质量的落地，获得客户的认可。

模型的精确度和材质的质感往往决定了最终作品的成败。然而，这些作品的完美呈现并非易事，它们需要在精确的渲染与调试中逐渐焕发生机。为此，我基于three.js这一强大的WebGL库，精心打造了一款三维可视化大屏_场景模型glTF查看器，旨在为设计师们提供一个全方位的创作与调试平台。这款工具不仅能够帮助你轻松检查模型的完整性和材质的质感，还提供了丰富的调试功能，让你的创作过程更加顺畅。

一、glTF是什么：

流行的轻量级且高效的3D文件格式

glTF是一种专为Web和运行时环境设计的轻量级、高效的3D文件格式。它不仅支持高质量的3D场景和模型，还具备极高的压缩率和传输效率，使得在线3D内容的展示和交互变得前所未有的流畅和便捷。glTF查看器正是基于这一前沿标准，为设计师们带来了前所未有的前瞻创作自由。它不仅具备基本的模型查看功能，更包含了一系列强大的调试选项，让你的模型调整变得更加精细。从环境光强度、平行光强度到贴图的亮度、发光强度，金属粗糙度等每一个参数都可以根据你的需求进行微调。

二、3D glTF模型查看器：

加载查看glTF模型的在线工具

glTF查看器是一个基于three.js框架的在线查看验证工具。它允许用户上传3DglTF格式的模型以及各种纹理贴图。场景渲染是基于物理渲染，因此是支持上传PBR材质纹理贴图（基于物理渲染的材质，更真实），glTF查看器遵循PBR的金属粗糙度工作流（Metal/Roughness Workflow）查看演示。扩展阅读：

The PBR Guide 基于物理的渲染指引上

The PBR Guide 基于物理的渲染指引下

总之它是专为三维设计师打造，帮助设计师快速预览验证输出的glTF和GLB格式的3D模型，以及PBR材质的样式。包含检查三维场景环境、模型材质属性、PBR贴图纹理的样式与属性调试、动画预览等。它不仅是设计师交付前端前三维走查工具，而且也是提高三维设计质量的有效验证工具，还是整个研发团队的提效工具。希望它是在你工作中的小助手帮到你！

三、glTF查看器用用途：

用户群体和使用场景用途

用户群体

• 视觉/三维/UXUI/可视化/设计师、刚毕业设计初学者；

使用场景

• 开发流程中前期，演示项目，三维作品集
• 三维开发流程的前中期使用，设计师自验和调试模型和材质；转接给前端前视觉走查，确保设计交付没有问题；
• 在一些快速项目，需要竞演，快速预览开发结果给客户；
• 设计作品还是静图，需动态录制作品成效演示视频；

四、功能详解：

打造你的专属三维场景

1. 便捷的加载：支持拖拽本地 .glTF/.glb/.zip/文件夹到场景加载；同时支持 上传本地模型文件.glTF/.glb，高效便捷。                                                                               
2. 控场的能力：检查验证中，设计师需要能够自由地掌控场景中的每一个细节。glTF查看器允许你自由控制相机视角，并支持相机切换和缩放功能，让你能够从不同角度观察模型。此外，你还可以设置映射类型，曝光，也可选择显示或隐藏场景中的坐标和网格，让你的创作更加专注和高效。                                                                                    
3. 光源的魔法：在三维世界中，光源如同魔法师手中的魔杖，能够赋予模型以生命。glTF查看器允许你轻松调整环境光和平行光的强度，环境光和平行光的范围是标准的物理范围，支持设置环境贴图，背景以及模糊等，让模型在光影的交织中展现出丰富的层次感。                                                                                                                          
4. 模型的身法：在三维世界中，模型多种形态 支持实体模型和线框模型的切换，可设置线框颜色透明度；也支持显示模型的骨骼，可以在XYZ轴移动模型。                        
5. 材质贴图的魅力：支持上传模型材质属性的调试，平滑着色，颜色，AO，金属度，粗糙度，法线，置换，透明，射射率，透射率，清漆，氢气粗糙度等等强度设置；也支持环境贴图，发光贴图，AO贴图，金属度贴图，金属粗糙度贴图，法线贴图，置换贴图 显示与隐藏；每一种属性和贴图都为模型带来了独特的质感和细节。通过属性和上传贴图和调试这些贴图参数，你可以让模型呈现出令人惊叹的视觉效果 。                        
6. 动画的魔法：在三维空间中，模型的动画为场景带来了动态的生命力。glTF查看器支持开启或关闭模型中的动画，让你能够轻松浏览验证模型的动态表现。                           
7.  移动的魔法：开启移动模型，你还可以在场景中手动移动模型并获取其坐标，调试在三维中的位置，为场景带来无限的可能性。                                                                  
8. 其它魔法：支持场景默认和模型相机的切换；支持地面设置大小，颜色和贴图；支持查看模型的点线面统计和场景渲染的性能（fps/MS/MB）。                                              
9. 演示视频：直观感受glTF查看器的魅力。因此特地准备了一段演示视频。在视频中，你将看到如何上传glTF模型、调整光源和贴图参数、控制相机视角等操作。相信这段视频将帮助你更快地掌握这款工具的使用方法。   

五、如何使用：

基于浏览器，简单易用，支持手机随时随地可用

• 基础版使用

访问查看器：

打开浏览器Chrome(建议)，输入网址mgd123.com，点击下图所示按钮器跳转到glTF查看器：

上传模型：

① 上传模型方法1：在查看器页面上，找到“拖放区域” ②  支持推拽本地的.glTF、.glb、文件夹、压缩包（文件夹或压缩包内包含模型和纹理）

同时支持“上传文件”按钮上传模型，点击它在弹出的文件选择器中，找到并选择你要查看的本地.glTF或.glb文件

③ 在文件选择器底部选择点击打开，上传模型到场景中

④ 模型已上传到场景中，可以点击“清除”按钮清空场景模型，恢复到初始状态

⑤ 点击“上传环境”会弹文件选择器，找到本地环境HDR（上传选择见下图）

⑥ 上传模型PBR材质贴图（颜色，发光，AO，金属度，粗糙度，法线，置换）

⑦ “重置页面”重置上传的模型和上传的贴图，恢复到初始状态

⑧ 显示上传的模型，没上传材质贴图的模型是白模

⑨ 选择上传环境贴图按钮后会弹出的文件选择器中，找到本地环境HDR文件

⑩ 选择本地环境HDR文件，可选择1K~2k大小文件，防止过大加载慢

⑪ 在文件选择器底部选择点击打开，上传环境贴图应用到场景中

⑫ 上传PBR各通道材质贴图，后可看见各按钮下面出现⑬的清除按钮

⑬ 点击“清除”按钮可清除上传的对应材质贴图

⑭ 上传后贴图纹理，在场景中实时可看到模型应用上了材质

⑮ 场景中上传后模型后，右上角可以展开属性GUI控制面板，通过它可对模型进行细节质感调试

⑯ 可调试场景 映射类型，映射曝光，坐标显示已隐藏以及透明度，网格显示与隐藏以及透明度

⑰ 可调试平行光的强度与颜色，颜色支持颜色选择器修改

⑱ 可调试环境光的强度，环境光贴图强度，环境贴图的显示与隐藏，还支持调试贴图背景的模糊度

⑲ 可调试模型显示模式实体或 线性，线性支持线框颜色和透明度的设置，支持显示动画骨骼；支持移动模型，选中“移动模型”可在场景中用控件或ZYZ滑块移动模型，XYZ会显示移动后的坐标

⑳ 可调试模型材质属性，光影着色开启，模型颜色的设置，AO强度强度，发光强度，金属度强度，粗糙度强度，法线强度，置换强度，alpha阈值，透明度，折射率，透射率， 清漆，清漆粗糙度；可调试 颜色，发光，AO  金属，粗糙，法线，置换，透明等贴图的隐藏与显示，单独显示某贴图纹理可专注调试贴图

㉑ 可预览模型动画，当模型本身包含动画（烘焙后的帧动画）默认识别自动播放，可设置暂停

㉒ 可设置场景默认相机和模型相机的视角切换

㉓ 可显示地面 支持设置地面半径和地面颜色

㉔ 可显示模型统计的点线面数据和场景的FPS,MS,MB 查看场景性能

㉕ 支持收起或展开GUI控制面板，需要调试再展开

㉖ 支持切换预览和编辑模式切换，预览专注查看场景

初步了解了功能 现在下载模型资料，访问下面提供的地址去试试吧！

模型文件：https://pan.baidu.com/s/1x0zyou6U22srJdt82fEfCg        提取码：20a3
Battle Damaged Sci-fi Helmet – PBR by theblueturtle_

六、工具地址 

地址1：https://mgd123.com/N1ebulaNoodl8e/       

地址2：https://afdian.com/a/designer_aron            

QQ群: 879680256   微信: 806061666

说明：以上基础版本， 便于小伙伴学习之用。为恶意防攻击，不定时会更新地址

如收藏了地址，可能会过期。可回到网站 https://mgd123.com 再次点击 “glTF查看器”按钮进入，也可藏本页（永久发布页）：

—————————————————————————————————————————————————————————————————–

为满足高级用户需求，也提供高级版。如想获高级版本，可以小赞助作者给与鼓励，解锁更多。

购买前如有疑问可咨询微信：Aron-Design  或  806061666

七、高级版本                   

版本：V2.9 支持功能如下：

加载

• • 支持拖拽本地 .glTF/.glb/.zip/文件夹；
  • 支持 上传本地模型文件.glTF/.glb；

界面

• • 支持上传顶部标题，左边业务，底部导航，右边业务UI；
  • 支持清除上传的UI文件；
  • 支持png透明UI图，也支持动态特效或图表的apng格式；
  • 支持浏览器自适应与磨砂玻璃隔层效果；
  • 支持导出场景配置包， 含场景（模型，环境贴图，模型纹理，路径文件，地面纹理，配置文件）；
  • 支持导入场景配置包 ，含场景（模型，环境贴图，模型纹理，路径文件，地面纹理，配置文件）；
  • 支持导出场景快照截屏图片文件，自动下载；
  • 支持录制场景视频，支持始录制和停止录制，自动下载；
  • 支持渲染场景模型。导出为静态带透明层的png 或动态的apng，自动下载；
  • 支持上传场景模型的环境文件和模型的PBR纹理（颜色，AO，发光，金属度，粗糙度，法线，置换，透明度）；
  • 支持清除上传的环境和模型模型纹理文件；
  • 支持上传PBR各通道的纹理和清除地面纹理；
  • 支持上传和清除路径文件；
  • 支持重置场景恢复默认状态；
  • 支持收起和展开场景三维设置控件；
  • 支持切换场景的编辑和预览模式；
  • 支持预览模式生成快照，视频，渲染

场景

• • 支持设置显示或隐藏坐标轴和网格，可设置透明度；
  • 支持圆网格 启用，半径，扇区，环，分段，颜色的设置；
  • 支持设置映射类型，曝光；
  • 支持启用SSAA渲染以及采样级别设置；

环境

• • 支持启用环境光和环境光强度设置；
  • 支持上传场景HDR环境文件，类型支持.hdr.exr和图片；
  • 支持启用HDR环境，可切换HDR文件，
  • 支持启用HDR背景，可切换背景，可设置模糊度；
  • 支持设置纯色和渐变色背景，可设置色值；
  • 支持 启用背景纹理 ，选择默认纹理，本地上传；

天空

• • 支持开启物理天空，可设置浑浊度，散射，散射系数，方向性；
  • 支持太阳高度面，曝光度，方位；
  • 支持启用半球光，可设置强度颜色和地面颜色；

太阳

• • 支持启用太阳，可开启太阳助手设置太阳强度颜色；
  • 支持设置太阳不同时段（24小时）的光照强度以及动画变化；
  • 支持启用太阳投影，可设置偏移以及开启捕捉和强度调试；

灯光

• • 支持显示和隐藏光源，主光，辅助光1，辅助光2；
  • 支持启用光源助手，可设置光源强度，颜色以及光源的坐标位置和距离；

模型

• • 支持识别模型图层对象，以树结构展示；
  • 支持显示和隐藏图层对象；
  • 支持高亮图层对象；
  • 支持模型重置显示在地面之上；
  • 支持移动图层对象，支持场景坐标移动和XYZ滑块移动；
  • 支持设置模型类型，实体，线框，可支持线框颜色和透明度；
  • 支持设置模型X光模式，可设置X光颜色和透明度；
  • 支持显示模型动画的蒙皮和骨架；
  • 支持显示模型法线，和启用双面渲染；
  • 支持移动整个模型对象，支持场景坐标移动和XYZ滑块移动；
  • 支持识别模型顶点数，边数，面数统计；

材质

• • 支持识别模型材质对象，以树结构展示；
  • 支持设置图层材质属性 选中，显示与隐藏，平滑着色，模型颜色；
  • 支持设置图层材质 AO,发光，金属度，粗糙度，法线，置换，透明度强度；
  • 支持设置图层材质 折射率，反射率，透射率也叫传输值， 彩虹，彩虹折射率，清漆，清漆粗糙度值；
  • 支持设置图层材质 镜面反射强度，颜色，环境强度，光泽，光泽颜色，光泽粗糙度，衰减距离颜色值；
  • 支持切换模型面类型，前面，后面，双面，启用雾气，设置混合模式，正常叠加相乘减去等混合模式；
  • 支持设置图层纹理的XY的平铺数量和偏移参数，也支持纹理的旋转角度设置；
  • 支持重置图层材质为默认值；
  • 支持整个模型以上参数的设置除外还支持纹理XY偏移动画的启用和速度的设置；
  • 支持上传整个模型的PBR纹理（颜色，AO，发光，金属度，粗糙度，法线，置换，透明度贴图）；
  • 支持整个模型PBR纹理图层的显示与隐藏及单个纹理图层的显示与隐藏；
  • 支持重置默认值

动画

• • 支持识别模型动画，可设置开启和暂停动画以及子动画；
  • 支持四元帧动画，如克隆等效果器实现的动画需要烘焙动画；
  • 支持修改动画每秒帧数以及是否循环播放；

相机

• • 支持识别模型内部相机 可设置显示与隐藏还有属性设置；
  • 支持切换模型内嵌相机的视角，切换到所选相机视角；
  • 支持设置相机视野和宽高比以及远近剪切面；
  • 支持设置XYZ位置和目标还有缩放，角度旋转，自转等；
  • 支持设置启用手动漫游以及漫游的速度，旋转参数设置等；
  • 支持设置启用自动漫游以及漫游的速度，旋转参数设置等；
  • 支持重置模型相机默认值；

路径

• • 支持上传路径文件，类型为json文件，可在C4D中导出；
  • 支持显示与隐藏路径；
  • 支持模型路径动画，可设置动画速度；
  • 支持相机路径动画，可设置动画速度；
  • 支持灯光路径动画， 可设置速度和灯光类型（平行，点，聚光等）；
  • 支持灯光路径设置颜色，强度，投影 ；
  • 支持灯光类型聚光灯的角度 半影 衰减 距离 聚光灯纹理 ；
  • 支持重置默认值；

地面

• • 支持上传地面纹理文件，基于PBR通道的纹理jpg/png；
  • 支持地面的显示与隐藏，可设置地面半径和颜色；
  • 支持地面显示线框，支持旋转和圆环分段还有颜色设置；
  • 支持设置地面纹理风格 选择默认纹理，支持本地文件上传；
  • 支持设置地面纹理XY轴向的平铺数量；
  • 支持设置地面纹理XY轴向的偏移动画以及动画速率；
  • 支持设置地面PBR材质属性，颜色，发光，AO，金属度，粗糙度，法线，透明，置换等通道属性值，让地面更有质感；
  • 支持地面的Y轴位置和地面投影的显示；

后期

• • 支持场景后期 启用FXAA ,SSAA以及采样级别设置；
  • 支持启用bokeh效果，可设置焦点光圈和模糊；
  • 支持启用LUT效果，可选择LUT文件 设置强度；
  • 支持启用泛光效果，可设置阈值，强度和半径；
  • 支持启用点屏效果，可设置比例，RGB偏移以及偏移量；
  • 支持启用漂白效果，可设置透明度；
  • 支持启用褐色效果，可设置强度值；
  • 支持启用暗角效果，可设置偏移和黑暗度；
  • 支持启用胶片效果，可设置强度值；
  • 支持启用水平和垂直模糊 效果，可设置强度值；

特效

• • 支持 开启云特效，可设置云速度，大小，粒子数量等参数值；
  • 支持 开启雨特效。可设置雨速度，大小，粒子数量等参数值；
  • 支持 开启雪特效。可设置雪速度，大小，粒子数量等参数值；
  • 以上特效支持重置为默认值

导出

• • 支持导出类型 .glTF/.glb/格式选择；
  • 支持导出设置 纹理尺寸，TRS；

性能

• • 支持显示 场景FPS，MS，MB的实时监控直方图和参数值；
  • 支持显示模型统计，点数，线数，三角面数，四边面数；

八、发布地址

爱发电：https://afdian.com/a/designer_aron

九、会员服务

• 按月付费，加会员群，帮助解疑
• 咨询QQ群: 879680256   微信: 806061666