【模型渲染】前端如何让glb模型转3dtiles

2024-04-27 20:36

本文主要是介绍【模型渲染】前端如何让glb模型转3dtiles,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

发现了一个新插件,3D Tiles Tools,CesiumGS 出品,新鲜热乎(当前写这篇文章的时候,版本是v 0.4.1),所以,有些功能还不够使用。这里是我当前版本发现的问题,例如:不可以从一个文件夹中读取glb,然后转到另一个输出文件夹中

希望之后的版本,可以有更多的优化。

执行步骤:

  1. 拷贝项目(拷贝最新分支的代码,是我所建议的)
 git clone https://github.com/CesiumGS/3d-tiles-tools

因为之前我拷贝了最新稳定版本v 0.4.1的代码,结果跟项目的文档上有所出入(有些功能使用了会报错),是换成了 upgrade-cmpt 这个看提交记录是最新的分支的代码才没有报错

  1. 切换到对应目录下,或者直接通过编辑器打开项目,下载依赖文件
npm install
  1. 下载完成后,它里面会有一些demo以及文件,可以运行一个命令看看有没有报错,这里官方的示例是gzip压缩一个文件夹:

-i 前面的是调用的方法,-i 后面跟的是输入文件或者文件夹,-o 后面跟着的是输出文件或文件夹

 npx ts-node .\src\cli\main.ts gzip -i ./specs/data/TilesetOfTilesets/ -o ./output/TilesetOfTilesets-gzipped/
  1. 如果示例是成功的,那我们就开始转模型格式吧:
    举个例子,我要调用 glbToB3dm 方法转glb文件夹里面的glb,然后输出到output文件夹里,对应的是转换后的b3dm文件。

比较无语的地方就在这里,这个转换方法是一一对应的,就是一个glb转一个b3dm。所以我才吐槽,不能一个文件夹对应一个文件夹。

 npx ts-node .\src\cli\main.ts glbToB3dm -i ./glb/1.glb -o ./output/1.b3dm
  1. 然后转换成对应瓦片了,可是没有tileset.json,所以需要再创建一个json出来:
    调用 createTilesetJson 方法,去扫描刚刚转换出来的 output 文件夹,让其根据里面的 b3dm 生成一个tileset.json
 npx ts-node .\src\cli\main.ts createTilesetJson -i ./output/ -o ./output/tileset.json
  1. 重点来了,如果有多个glb,怎么转成 b3dm?
    答案是:写一个批处理文件出来,把下面的代码复制粘贴到记事本中,保存后更改其后缀名为.bat,双击执行就行了。

代码的内容可以视情况而变,例如文件夹地址名称不对,那就改;例如,可以在循环代码后,再接一个生成tileset.json的命令。等等。

@echo off
for %%f in (./glb/*.glb) do (npx ts-node .\src\cli\main.ts glbToB3dm -i "%%f" -o "./output/%%~nf.b3dm"
)
echo All files have been processed.
  1. 快去运行看看转换出来的3dtiles能否渲染吧!
    还有比较多的插件,例如 objTo3d-tiles,运行方法大差不差的,可以多多尝试。

这篇关于【模型渲染】前端如何让glb模型转3dtiles的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/941472

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA