网站开发 名片,文汇智能建站平台,免费logo网站,集团网站设计欣赏Cesium 实战 - 使用 gltf-vscode 查看、预览以及编辑 glTF 和 GLB 模型 VScode#xff08;Visual Studio Code#xff09; 安装模型必要插件VScode 预览自定义关节#xff08;articulations#xff09;动作VScode 导入 GLB 格式模型VScode 导出 GLB 格式模型 模型渲染作为 … Cesium 实战 - 使用 gltf-vscode 查看、预览以及编辑 glTF 和 GLB 模型 VScodeVisual Studio Code 安装模型必要插件VScode 预览自定义关节articulations动作VScode 导入 GLB 格式模型VScode 导出 GLB 格式模型 模型渲染作为 Cesium 一个非常重要的功能目前只支持 glTF 和 GLB 两种格式其实是一种格式GLB 是 glTF 的二进制形式。
在实际项目中由于对模型的操作可能会需要查看模型的属性。之前一直使用 blender 来查看、调整以及转换等操作。模型转换详见Cesium 三维模型使用 blender 调整位置、坐标轴、比例等。
近期有需求需要给模型增加 自定义关节articulations动作然后发现 blender 对于 Cesium 开发人员不太友好尤其是查看 glTF 的 json 数据属性。
后来发现一个开源项目可以直接查看和操作 glTF 模型gltf-vscode。
gltf-vscode 是由 AGI一家美国工程仿真领域的企业 开发和维护的功能非常强大比较适合 Cesium 开发人员。
gltf-vscode 可以查看编辑模型、导入 GLB 模型、GLB 与 glTF 转换等功能。
本文包含 VScode 安装模型必要插件、预览自定义关节动作、导入 GLB 格式模型、导出 GLB 格式模型 四部分。 VScodeVisual Studio Code 安装模型必要插件
Visual Studio Code 下载于安装比较简单也不需要破解不过多介绍。
使用 VScode 打开 gltf-vscode 项目。
VScode 应该会自动提示安装所需插件 复制 glTF 模型到项目中这里作者新建 public/model 文件夹来存放模型。
预览 glTF 模型可以查看 glTF 文件数据以及预览模型
注意需要打开 glTF 模型文件之后在文件内右键操作。 默认为 Babylon 渲染模型这里也可以切换其他模型预览引擎 以下为 Cesium 官方火箭推进器的模型cesium.vip 镜像源
launchvehicle.gltf
launchvehicle.glb VScode 预览自定义关节articulations动作
预览切换为 Cesium 引擎时可以查看模型自定义的关节articulations动作 这里选择了 SRB 固体助推器模块组件并且调整 Separate、Drop 和 Rotate 关节articulations参数来查看效果 VScode 导入 GLB 格式模型
GLB 模型为二进制文件VScode 不能直接打开这里演示导入 GLB 格式模型 将 GLB 文件拷贝到项目中 由于 GLB 模型转为 glTF 格式会生成一系列相关文件这里创建文件夹用于存放这些文件 选中 GLB 模型右键 - 导入 GLB 模型glTF: Import from GLB: 选择创建好的文件夹这里不建议修改名字保存 以下是生成的 glTF 模型以及相关文件所有文件均不可删除否则会出问题 点击 glTF 文件查看内容以及预览模型 VScode 导出 GLB 格式模型
glTF 格式模型更方便编辑但是松散的 glTF 模型包含 .bin、.jpg 等不容易移动使用可以导出为 GLB 格式 导出之后在 Cesium 中加载使用 参考博客
[1]: glTF Tools Extension for Visual Studio Code
[2]: VSCode查看gltf文件glTF Tools插件
[3]: 图形化开发六03-Three.js之导入模型——glTF格式文件导入3D模型的使用 vs code之glTF Tools插件的使用方法
[4]: 3D性能优化 | 说一说glTF文件压缩
