1. 引言

3D Tiles 是 3D GIS 中常见的三维数据格式，能否用Three.js来加载渲染呢？肯定是可以，Three.js只是一个WebGL框架，渲染数据肯定可以，但是加载、解析数据得手动解决

有没有一个第三方库解决这个问题呢？有，比如这个：NASA-AMMOS/3DTilesRendererJS: Renderer for 3D Tiles in Javascript using three.js (github.com)

这里就简要记录如何在Three.js中加载 3D Tiles

2. 加载3D Tiles

首先，搭建一个简单的三维场景

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Document</title>

	<style>

		html,

		body,

		canvas {

			height: 100%;

			width: 100%;

			margin: 0;

		}

	</style>

</head>

<body>

	<canvas id="canvas"></canvas>

	<script type="importmap">

		{

			"imports": {

				"three": "https://unpkg.com/three/build/three.module.js",

				"three/addons/": "https://unpkg.com/three/examples/jsm/"

			}

		}

	</script>

	<script type="module">

		import * as THREE from 'three';

		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

		const scene = new THREE.Scene();

		const canvas = document.querySelector('#canvas');

		const camera = new THREE.PerspectiveCamera(75,  canvas.clientWidth / canvas.clientHeight , 0.1, 1000);

		camera.position.z = 5;

		const renderer = new THREE.WebGLRenderer({

			canvas: document.querySelector('#canvas')

		});

		renderer.setSize(window.innerWidth, window.innerHeight, false)

		const geometry = new THREE.BoxGeometry(1, 1, 1);

		const material = new THREE.MeshPhongMaterial({

			color: 0x00ff00

		});

		const cube = new THREE.Mesh(geometry, material);

		scene.add(cube);

		const light = new THREE.DirectionalLight(0xffffff, 1);

		light.position.set(0, 0, 5);

		scene.add(light);

		const controls = new OrbitControls( camera, renderer.domElement );

		function animate() {

			requestAnimationFrame(animate);

			cube.rotation.x += 0.01;

			cube.rotation.y += 0.01;

			renderer.render(scene, camera);

		}

		animate();

	</script>

</body>

</html>

然后是引入3DTilesRendererJS，这里引入的是GoogleTilesRenderer来加载Google的在线地图，另外还需要使用GLTFLoader和DRACOLoader以进行数据解析

<script type="importmap">

		{

			"imports": {

				"three": "https://unpkg.com/three/build/three.module.js",

				"three/addons/": "https://unpkg.com/three/examples/jsm/",

                "3DTilesRendererJS": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.3.30/+esm"

			}

		}

</script>

<script type="module">

    import * as THREE from 'three';

    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

    import { TilesRenderer, GoogleTilesRenderer } from '3DTilesRendererJS'

    import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

    // ...

</script>

下一步是加载谷歌在线3D Tiles并加入场景中

const tilesRenderer = new GoogleTilesRenderer( 'AIzaSyBQ7Wj99aTxRqET-22qYWGFcDCWgVDt89A' ); // 传入的是谷歌倾斜摄影的API key

tilesRenderer.setLatLonToYUp( 36.266494 * THREE.MathUtils.DEG2RAD, 120.460205 * THREE.MathUtils.DEG2RAD ); // Tokyo Tower

tilesRenderer.setCamera( camera );

tilesRenderer.setResolutionFromRenderer( camera, renderer );

const dracoLoader = new DRACOLoader();

dracoLoader.setDecoderPath( 'https://unpkg.com/three@0.153.0/examples/jsm/libs/draco/gltf/' );

const loader = new GLTFLoader( tilesRenderer.manager );

loader.setDRACOLoader( dracoLoader );

tilesRenderer.manager.addHandler( /\.gltf$/, loader );

scene.add( tilesRenderer.group );

最后在每一帧中更新3D Tiles渲染器

function animate() {

    requestAnimationFrame(animate);

    tilesRenderer.update();

    // ...

    renderer.render(scene, camera);

}

加载的结果如下：

完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Document</title>

	<style>

		html,

		body,

		canvas {

			height: 100%;

			width: 100%;

			margin: 0;

		}

	</style>

</head>

<body>

	<canvas id="canvas"></canvas>

	<script type="importmap">

		{

			"imports": {

				"three": "https://unpkg.com/three/build/three.module.js",

				"three/addons/": "https://unpkg.com/three/examples/jsm/"

			}

		}

	</script>

	<script type="module">

		import * as THREE from 'three';

		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

        import { TilesRenderer, GoogleTilesRenderer } from 'https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.3.30/+esm'

        import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

		const scene = new THREE.Scene();

		const canvas = document.querySelector('#canvas');

		const camera = new THREE.PerspectiveCamera(75,  canvas.clientWidth / canvas.clientHeight , 0.1, 100000);

		camera.position.y = 500;

		camera.position.z = 500;

		const renderer = new THREE.WebGLRenderer({

			canvas: document.querySelector('#canvas')

		});

		renderer.setSize(window.innerWidth, window.innerHeight, false)

		const controls = new OrbitControls( camera, renderer.domElement );

        const tilesRenderer = new GoogleTilesRenderer( 'AIzaSyBQ7Wj99aTxRqET-22qYWGFcDCWgVDt89A' );

        tilesRenderer.setLatLonToYUp( 35.6586 * THREE.MathUtils.DEG2RAD, 139.7454 * THREE.MathUtils.DEG2RAD ); // Tokyo Tower

        tilesRenderer.setCamera( camera );

        tilesRenderer.setResolutionFromRenderer( camera, renderer );

        const dracoLoader = new DRACOLoader();

        dracoLoader.setDecoderPath( 'https://unpkg.com/three@0.153.0/examples/jsm/libs/draco/gltf/' );

        const loader = new GLTFLoader( tilesRenderer.manager );

        loader.setDRACOLoader( dracoLoader );

        tilesRenderer.manager.addHandler( /\.gltf$/, loader );

        scene.add( tilesRenderer.group );

		function animate() {

			requestAnimationFrame(animate);

            tilesRenderer.update();

			renderer.render(scene, camera);

		}

		animate();

	</script>

</body>

</html>

上面加载的是日本东京的倾斜摄影数据，那在没有倾斜摄影数据的地方呢，比如中国的某些城市，答案是会加载类似于高程与遥感影像的合成数据，如下图：

此时只是把经纬度做以下修改：

tilesRenderer.setLatLonToYUp( 36.266494 * THREE.MathUtils.DEG2RAD, 120.460205 * THREE.MathUtils.DEG2RAD ); // 山东青岛

总的来说，有时可以在Three.js中加载这样的3D Tiles作为底图来使用，更多的使用方法可参考官方文档：NASA-AMMOS/3DTilesRendererJS: Renderer for 3D Tiles in Javascript using three.js (github.com)

3. 参考资料

[1] NASA-AMMOS/3DTilesRendererJS: Renderer for 3D Tiles in Javascript using three.js (github.com)

[2] 3D Tiles Renderer Options Example (nasa-ammos.github.io)

[3] threejs加载3dtiles（倾斜摄影）数据_threejs 3dtiles-CSDN博客

Three.js中加载和渲染3D Tiles的更多相关文章

  1. java使用htmlunit工具抓取js中加载的数据

    htmlunit 是一款开源的java 页面分析工具,读取页面后,可以有效的使用htmlunit分析页面上的内容.项目可以模拟浏览器运行,被誉为java浏览器的开源实现.这个没有界面的浏览器,运行速度 ...

  2. Three.js中加载外部fbx格式的模型素材

    index.html部分: index.js部分: Scene.js部分:

  3. (转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。

    1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...

  4. JS 动态加载脚本 执行回调_转

    关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解 ...

  5. JS 动态加载脚本 执行回调

    JS 动态加载脚本  执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件 ...

  6. JS和CSS加载（渲染）机制不同

    一.结论 CSS可以在页面加载完成后随时渲染.举个例子:通过js给某个元素加一个id或者css,只要这个id或者css有对应的样式,此元素的样式就会自动生效. JS不可以在页面加载完成后生效.最明显的 ...

  7. 浏览器加载和渲染html的顺序（html/css/js）

    最近在学习前端的技术,把html.js.css的基础知识看了看.感觉越看越觉得前端并不比后端容易,技术含量还是相当大的.今天突然想弄明白浏览器到底是怎么加载和渲染html的?html中的DOM.js文 ...

  8. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  9. vue中加载three.js的gltf模型

    vue中加载three.js的gltf模型 一.开始引入three.js相关插件.首先利用淘宝镜像,操作命令为: cnpm install three //npm install three也行 二. ...

  10. 在HTML中使用JavaScript（浏览器对js的加载机制分析）

    前言: 向HTML页面中插入JavaScrip的主要方法,就是使用<script>标签.主要探讨<script>标签的在HTML页面的渲染机制.对应的业务场景:从js的加载机制 ...

随机推荐

  1. .NET 大数据实时计算--学习笔记

    摘要 纯 .Net 自研大数据实时计算平台,在中通快递服务数百亿包裹,处理数据万亿计!将分享大数据如何落地以及设计思路,技术重难点. 目录 背景介绍 计算平台架构 项目实战 背景介绍 计算平台架构 分 ...

  2. Go语言的100个错误使用场景（40-47）｜字符串&函数&方法

    目录 前言 5. 字符串 5.5 无用的字符串转换(#40) 5.6 获取子字符串操作和内存泄漏(#41) 6. 函数和方法 6.1 不知道选择哪种类型的方法接受者(#42) 6.2 从来不使用命名的 ...

  3. 详解instanceof底层原理，从零手写一个instanceof

    壹 ❀ 引 本道题的核心考点还是对于javascript原型的掌握程度,比如__proto__,prototype相关概念,以及instanceof底层原理的理解.若你对于原型已经非常熟悉,那么可以直 ...

  4. 【React】排查两小时，修改一个词，记一个因代码书写不规范导致的生命周期BUG

    壹 ❀ 引 因为现在工作主要以修bug为主,日常工作中总是会接触到千奇百怪的前端问题,它可能是代码缺陷导致的程序错误,也可能是方案不合理造成的性能问题,老实说修bug是一件很枯燥的事情,你需要阅读大量 ...

  5. NC20568 [SCOI2012]滑雪与时间胶囊

    题目链接 题目 题目描述 a180285非常喜欢滑雪.他来到一座雪山,这里分布着M条供滑行的轨道和N个轨道之间的交点(同时也是景点),而且每个景点都有一编号i(1 ≤ i ≤ N)和一高度Hi.a18 ...

  6. Ubuntu下通过Wine安装LTSpice 17.1.8

    LTSpice LTSpice 是常用的电路模拟软件, 但是只有 Windows 版本和 Mac 版本, 在 Linux 下需要用 Wine 运行. 以下说明如何在 Ubuntu 下安装最新的 LTS ...

  7. Java 根据Map的值对 List<Map<String, Object>> 进行排序

    对 List<Map<String, Object>> 类型数据的排序 有一个Map列表, 需要对这个列表, 按Map的某几个value进行排序, 并且还要分别指定正序或者倒序 ...

  8. CentOS在无网络环境下，用离线源yum安装软件

    先说大致步骤: 1.前提假设:当前无网络的目标服务器是A,我们需要先准备一台服务器B: 2.在B上面用yum先把软件安装完成. 3.然后用createrepo将B中的包拷贝出来,并传到A上(用U盘或者 ...

  9. oracle中约束（constraints）是如何影响查询计划的

    原文: http://www.oracle.com/technetwork/issue-archive/2009/09-may/o39asktom-096149.html oracle中约束(cons ...

  10. Oracle设置和删除不可用列

    Oracle设置和删除不可用列 1.不可用列是什么? 就是表中的1个或多个列被ALTER TABLE-SET UNUSED 语句设置为无法再被程序利用的列. 2.使用场景? If you are co ...