当前位置: 首页 > 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 做一些效果上的补充,可能会是更好的方案。

相关文章:

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

原生的 three.js 目前不支持 3d tiles 数据的加载,不过开源社区已经给出了一些解决方案,其中最活跃的要属 3DTilesRendererJS。它为 three.js 提供了加载和调度 3d tiles 数据的基本能力,虽说和 Cesium.js 对 3d tiles 的支持相比还有很大的差…...

坐牢第三十五天(c++)

一.作业 1.使用模版类自定义栈 代码&#xff1a; #include <iostream> using namespace std; template<typename T> // 封装一个栈 class stcak { private:T *data; //int max_size; // 最大容量int top; // 下标 public:// 无参构造函数stcak();// 有参…...

Conda离线部署django

要在没有网络连接的环境中使用conda部署Django&#xff0c;你需要预先在有网络连接的机器上创建一个包含所有必要包的环境&#xff0c;并导出该环境的配置文件。然后&#xff0c;你可以将这个配置文件和必要的包传输到目标机器上进行安装。 下面是详细的步骤&#xff1a; 1. …...

1. Fabric.js安装使用

安装 # 安装 fabricjs npm i fabric --save在需要使用的页面引入 import * as fabric from fabric...

Excel中.xls和.xlsx文件格式的区别,及C++操作Excel文件

‌文件结构和兼容性‌&#xff1a; XLS是Excel 97-2003版本的文件格式&#xff0c;而XLSX是Excel 2007及以上版本的文件格式。XLS格式是向下兼容的&#xff0c;意味着较新的Excel版本可以打开XLS文件&#xff0c;但较旧的版本无法打开XLSX文件。相反&#xff0c;XLSX格式是向上…...

php实用命令

php相关命令 命令错误级别 命令 命令命令介绍具体用法php -v查看php版本php -vphp -l检查php文件是否有语法错误php -lphp -m查看当前php安装的扩展php -mphp -i | grep extension_dir查看扩展安装的目录php -i | grep extension_dir 错误级别 命令命令介绍具体用法error_re…...

TypeError:未绑定方法

TypeError: unbound method 错误通常发生在类方法被调用时&#xff0c;但没有正确绑定到实例。这通常意味着你试图在类本身上调用一个实例方法&#xff0c;或者没有使用正确的方式创建类实例。 1、问题背景 某位开发者在尝试创建一个类似于经典的 Pratt 递归下降解析器时遇到了…...

Java虚拟机(JVM)的架构和工作原理,字节码执行流程

JVM的概念 JVM是Java Virtual Machine的缩写&#xff0c; 即Java虚拟机&#xff0c;也被称为Java程序运行的核心环境 。它是一种用于计算设备的规范&#xff0c;‌通过在实际的计算机上仿真模拟各种计算机功能来实现。‌JVM由一套字节码指令集、‌一组寄存器、‌一个栈、‌一个…...

416.分割等和子集

416.分割等和子集 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 示例 1&#xff1a; 输入&#xff1a;nums [1,5,11,5] 输出&#xff1a;true 解释&#xff1a;数组可以分割成 [1, 5, 5] 和…...

python初始化一个三维数组

文章目录 1.什么是三维数组2.那我应该如何初始化一个自定义长度的三维数组呢&#xff1f; 1.什么是三维数组 从最外层开始理解&#xff0c;可以理解为一维数组&#xff0c;里面套了一个二维数组&#xff08;12等于三维数组&#xff09; arr [ [[], []], [[], [], []], [[],[]]…...

EI会议推荐-第二届大数据与数据挖掘国际会议(BDDM 2024)

第二届大数据与数据挖掘国际会议&#xff08;BDDM 2024&#xff09; 1、基本信息 大会官网&#xff1a;http://www.icbddm.org/ 官方邮箱&#xff1a;icbddm163.com 主办方&#xff1a;武汉纺织大学 会议时间&#xff1a;2024年12月13日-12月15日 会议地点&#xff1a;湖…...

RK3566/RK3568 Android 11 动态显示/隐藏下拉框

概述 在系统服务中增加显示/隐藏状态栏方法,在上层app动态调用显示/隐藏下拉框方法,设备关机和重启后也能继续生效。 创建全局变量 1.定义全局变量 在frameworks/base/core/java/android/provider/Settings.java中添加 /*** Disable drop-down box* @hide*/public static…...

Android图片缓存工具类LruCache原理和使用介绍

LruCache & DiskLruCache原理。 常用的三级缓存主要有LruCache、DiskLruCache、网络&#xff0c;其中LruCache对应内存缓存、 DiskLruCache对应持久化缓存。Lru表示最近最少使用&#xff0c;意思是当缓存到达限制时候&#xff0c;优先淘汰近 期内最少使用的缓存&#xff0c…...

生活杂记1

生命中&#xff0c;总有一些事需要你一生去治愈&#xff0c;我把这些杂记写出来&#xff0c;写完了就不再想了&#xff0c;太内耗了…hahaha~ 因为嘴馋&#xff0c;小时候经常去老姑家&#xff0c;她家有各类零食及平时很少吃的“山珍海味”。去的次数多了&#xff0c;就和她家…...

go常用代码

连接阿波罗&#xff1a; 默认properties类型 package mainimport ("fmt""github.com/apolloconfig/agollo/v4""github.com/apolloconfig/agollo/v4/env/config" )func main() {c : &config.AppConfig{AppID: "2222",Cl…...

各种各样的正则表达式

一、校验数字的表达式 数字:^[0-9]*$ n位的数字:^\d{n}$ 至少n位的数字:^\d{n,}$ m-n位的数字:^\d{m,n}$ 零和非零开头的数字:^(0|[1-9][0-9]*)$ 非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$ 带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})?$ 正…...

WebRTC 基础

WebRTC 基础 目录 什么是 WebRTCWebRTC 的基本概念WebRTC 的基本流程 连接建立流程图 WebRTC 的基本对象 RTCPeerConnectionRTCSessionDescriptionRTCIceCandidate WebRTC API 详解 RTCPeerConnection API媒体流 API 详细的代码示例 基本连接示例完整的 WebRTC 实现示例 总结…...

半天攻略:用ChatGPT快速搞定高质量论文,从选题到完稿一站式指南!

在学术论文的撰写过程中&#xff0c;ChatGPT可以作为一个强大的辅助工具&#xff0c;帮助完成从确定主题到整理参考文献的各个环节。接下来&#xff0c;我们将详细介绍如何利用ChatGPT提升论文写作的效率和质量。 确定论文主题 初步探索&#xff1a;通过ChatGPT探索主题&#…...

探索PDF的奥秘:pdfrw库的神奇之旅

文章目录 探索PDF的奥秘&#xff1a;pdfrw库的神奇之旅背景&#xff1a;为何选择pdfrw&#xff1f;pdfrw是什么&#xff1f;如何安装pdfrw&#xff1f;五个简单的库函数使用方法场景应用&#xff1a;pdfrw在实际工作中的应用常见问题与解决方案总结 探索PDF的奥秘&#xff1a;p…...

修改jupyter notebook 默认浏览器(不动配置文件,改系统默认浏览器)

最开始把联想浏览器切到EDGE就是用的修改系统的默认浏览器。不知怎么的现在搜到的方法都是在说修改配置文件&#x1f613;。 不想动配置文件&#xff0c;平时对默认浏览器没有特殊要求的&#xff0c;可以用这个方法。 这里是把默认浏览器改成联想浏览器&#xff0c;电脑也是联…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

高分辨率图像合成归一化流扩展

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 1 摘要 我们提出了STARFlow&#xff0c;一种基于归一化流的可扩展生成模型&#xff0c;它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流&#xff08;TARFlow&am…...