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.使用模版类自定义栈 代码: #include <iostream> using namespace std; template<typename T> // 封装一个栈 class stcak { private:T *data; //int max_size; // 最大容量int top; // 下标 public:// 无参构造函数stcak();// 有参…...
Conda离线部署django
要在没有网络连接的环境中使用conda部署Django,你需要预先在有网络连接的机器上创建一个包含所有必要包的环境,并导出该环境的配置文件。然后,你可以将这个配置文件和必要的包传输到目标机器上进行安装。 下面是详细的步骤: 1. …...
1. Fabric.js安装使用
安装 # 安装 fabricjs npm i fabric --save在需要使用的页面引入 import * as fabric from fabric...
Excel中.xls和.xlsx文件格式的区别,及C++操作Excel文件
文件结构和兼容性: XLS是Excel 97-2003版本的文件格式,而XLSX是Excel 2007及以上版本的文件格式。XLS格式是向下兼容的,意味着较新的Excel版本可以打开XLS文件,但较旧的版本无法打开XLSX文件。相反,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 错误通常发生在类方法被调用时,但没有正确绑定到实例。这通常意味着你试图在类本身上调用一个实例方法,或者没有使用正确的方式创建类实例。 1、问题背景 某位开发者在尝试创建一个类似于经典的 Pratt 递归下降解析器时遇到了…...
Java虚拟机(JVM)的架构和工作原理,字节码执行流程
JVM的概念 JVM是Java Virtual Machine的缩写, 即Java虚拟机,也被称为Java程序运行的核心环境 。它是一种用于计算设备的规范,通过在实际的计算机上仿真模拟各种计算机功能来实现。JVM由一套字节码指令集、一组寄存器、一个栈、一个…...
416.分割等和子集
416.分割等和子集 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集,使得两个子集的元素和相等。 示例 1: 输入:nums [1,5,11,5] 输出:true 解释:数组可以分割成 [1, 5, 5] 和…...
python初始化一个三维数组
文章目录 1.什么是三维数组2.那我应该如何初始化一个自定义长度的三维数组呢? 1.什么是三维数组 从最外层开始理解,可以理解为一维数组,里面套了一个二维数组(12等于三维数组) arr [ [[], []], [[], [], []], [[],[]]…...
EI会议推荐-第二届大数据与数据挖掘国际会议(BDDM 2024)
第二届大数据与数据挖掘国际会议(BDDM 2024) 1、基本信息 大会官网:http://www.icbddm.org/ 官方邮箱:icbddm163.com 主办方:武汉纺织大学 会议时间:2024年12月13日-12月15日 会议地点:湖…...
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、网络,其中LruCache对应内存缓存、 DiskLruCache对应持久化缓存。Lru表示最近最少使用,意思是当缓存到达限制时候,优先淘汰近 期内最少使用的缓存,…...
生活杂记1
生命中,总有一些事需要你一生去治愈,我把这些杂记写出来,写完了就不再想了,太内耗了…hahaha~ 因为嘴馋,小时候经常去老姑家,她家有各类零食及平时很少吃的“山珍海味”。去的次数多了,就和她家…...
go常用代码
连接阿波罗: 默认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快速搞定高质量论文,从选题到完稿一站式指南!
在学术论文的撰写过程中,ChatGPT可以作为一个强大的辅助工具,帮助完成从确定主题到整理参考文献的各个环节。接下来,我们将详细介绍如何利用ChatGPT提升论文写作的效率和质量。 确定论文主题 初步探索:通过ChatGPT探索主题&#…...
探索PDF的奥秘:pdfrw库的神奇之旅
文章目录 探索PDF的奥秘:pdfrw库的神奇之旅背景:为何选择pdfrw?pdfrw是什么?如何安装pdfrw?五个简单的库函数使用方法场景应用:pdfrw在实际工作中的应用常见问题与解决方案总结 探索PDF的奥秘:p…...
修改jupyter notebook 默认浏览器(不动配置文件,改系统默认浏览器)
最开始把联想浏览器切到EDGE就是用的修改系统的默认浏览器。不知怎么的现在搜到的方法都是在说修改配置文件😓。 不想动配置文件,平时对默认浏览器没有特殊要求的,可以用这个方法。 这里是把默认浏览器改成联想浏览器,电脑也是联…...
多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言:多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时,基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套:跨云网络构建数据…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候,遇到了一些问题,记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器
第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...
深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析:跨文件编程的终极指南 📅 更新时间:2025年6月5日 🏷️ 标签:C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么?&…...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果