当前位置: 首页 > news >正文

three.js使用3DTilesRendererJS加载3d tiles数据

原生的 three.js 目前不支持 3d tiles 数据的加载,不过开源社区已经给出了一些解决方案,其中最活跃的要属 3DTilesRendererJS。它为 three.js 提供了加载和调度 3d tiles 数据的基本能力,虽说和 Cesium.js 对 3d tiles 的支持相比还有很大的差距,但也比没有的好。毕竟 3d tiles 数据的加载和调度还是比较复杂的,要自己写也没那么容易,这一点在以前研究 Cesium.js 相关源码的时候就深有体会。

3DTilesRendererJS 最核心的类是 TilesRenderer,用来渲染和调度一份 3d tiles 数据,相当于Cesium.js 里的 Cesium3DTileset。使用起来非常简单,构造的时候传入 JSON 文件的 url 即可。

const tileset = new TilesRenderer("http://localhost:8080/XXX/tileset.json");

构造 TilesRenderer 实例

接着,需要把 TilesRenderer 实例和 three.js 的 camera 以及 renderer 关联起来,根据 three.js 的相机和渲染器参数来设置切片显示的分辨率。

tileset.setCamera(camera);
tileset.setResolutionFromRenderer(camera, renderer);

关联 three.js 的相机和渲染器参数 

很多 3d tiles 数据都是做了顶点压缩或纹理压缩的,比如顶点的 DRACO 压缩、KTX2 和 DDS 等纹理压缩格式,对于这类数据需要在GLTF解析器(GLTFLoader)中添加解压缩的能力。下面以解压缩 DRACO 为例用代码加以说明。

// 配置GLTF数据的解析器
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('./jsm/libs/draco/gltf/');const loader = new GLTFLoader(tileset.manager);
loader.setDRACOLoader(dracoLoader);
tileset.manager.addHandler(/\.gltf$/, loader);

为GLTF解析器配置解压缩 DRACO 的能力 

3d tiles数据以往基本上都是在 WGS84椭球上呈现的。现在要在 three.js 的局部场景下展示,则需要把它放在局部场景相机的视野范围内,并保证数据的上方向正确。这里封装了一个 adjustTilesPositionAndDirection 方法,将数据放置在局部场景的中心,并将Y轴正方向(Y+)作为数据的上方向。这样数据在 three.js 三维场景中就能正常摆放了。

function rotationBetweenDirections(dir1, dir2) {const rotation = new THREE.Quaternion();const a = new THREE.Vector3().crossVectors(dir1, dir2);rotation.x = a.x;rotation.y = a.y;rotation.z = a.z;rotation.w = 1 + dir1.clone().dot(dir2);rotation.normalize();return rotation;
}function adjustTilesPositionAndDirection(tiles) {if (!tiles) {return;}const sphere = new THREE.Sphere();tiles.getBoundingSphere(sphere);const position = sphere.center.clone();const distanceToEllipsoidCenter = position.length();const surfaceDirection = position.normalize();const up = new THREE.Vector3(0, 1, 0);const rotationToNorthPole = rotationBetweenDirections(surfaceDirection, up);tiles.group.quaternion.x = rotationToNorthPole.x;tiles.group.quaternion.y = rotationToNorthPole.y;tiles.group.quaternion.z = rotationToNorthPole.z;tiles.group.quaternion.w = rotationToNorthPole.w;tiles.group.position.y = - distanceToEllipsoidCenter;
}

调整数据在 three.js 场景中的位置和上方向 

最后在每一帧渲染时都去执行一次 TilesRenderer 的更新。至此,一份3d tiles数据的基本加载就完成了。

function renderLoop() {// 更新 TilesRenderer 之前需要更新 three.js 的相机参数camera.updateMatrixWorld();tileset.update(); // 更新 TilesRendererrenderer.render(scene, camera);
}

每一帧都更新 TilesRenderer 

以上是使用 3DTilesRendererJS 的基本流程。还可以做一些辅助工作。

可以根据需要为数据注册一些插件,可选的插件在官方文档中查看。下面的示例以调试插件为例,简要说明插件的注册和使用方式。

// 注册调试插件
tileset.registerPlugin(new DebugTilesPlugin());// ...// 获取调试插件,并显示包围盒的线框
tileset.getPluginByName('DEBUG_TILES_PLUGIN').displayBoxBounds = true;

插件的注册和使用 

当场景中加载了多份 3d tiles 数据时,最好共享内存和下载队列,以减少性能开销。

// 设置图层1的缓存大小
tileset.lruCache.minSize = 900;
tileset.lruCache.maxSize = 1300;// 图层2和图层1共享内存和下载队列以减少性能开销
tileset2.lruCache = tileset.lruCache;
tileset2.downloadQueue = tileset.downloadQueue;
tileset2.parseQueue = tileset.parseQueue;

 共享内存和下载队列


个人觉得和 Cesium.js 相比,3DTilesRendererJS 加载和调度 3d tiles 的能力还是挺弱的。小场景、和数据之间交互(操作、修改)要求不那么高的情况下可以尝试。如果是做大场景下的 GIS 应用,也许 Cesium.js 和 Three.js 做深度融合(绘制在同一个 canvas 上,深度值做统一),GIS 功能交给 Cesium.js,Three.js 做一些效果上的补充,可能会是更好的方案。

http://www.lryc.cn/news/431404.html

相关文章:

  • 坐牢第三十五天(c++)
  • Conda离线部署django
  • 1. Fabric.js安装使用
  • Excel中.xls和.xlsx文件格式的区别,及C++操作Excel文件
  • php实用命令
  • TypeError:未绑定方法
  • Java虚拟机(JVM)的架构和工作原理,字节码执行流程
  • 416.分割等和子集
  • python初始化一个三维数组
  • EI会议推荐-第二届大数据与数据挖掘国际会议(BDDM 2024)
  • RK3566/RK3568 Android 11 动态显示/隐藏下拉框
  • Android图片缓存工具类LruCache原理和使用介绍
  • 生活杂记1
  • go常用代码
  • 各种各样的正则表达式
  • WebRTC 基础
  • 半天攻略:用ChatGPT快速搞定高质量论文,从选题到完稿一站式指南!
  • 探索PDF的奥秘:pdfrw库的神奇之旅
  • 修改jupyter notebook 默认浏览器(不动配置文件,改系统默认浏览器)
  • 一个基于共享内存的内存数据库:1 介绍
  • 可视化编程 制作在线点名程序,人工和随机生成两种模式
  • pdb在CDB间搬迁 dblink 与rman
  • Linux系统中的fork与vfork的区别
  • 特殊类的设计和类型转换
  • ES模块导入、导出学习笔记
  • Bagging: 数量,而不是质量。
  • 维信小程序禁止截屏/录屏
  • 不同大模型代码解释对比
  • Python函数的编写
  • Linux下的常用命令分享 二(ubuntu 16.04)