three loader 3dtiles

三加载器 3dtiles

演示 — 使用 — 路线图 — 贡献 — 文档 — 替代方案

这是一个由 Cesium 创建的 Three.js 加载器模块，用于处理 OGC 3D Tiles。目前它支持两种主要格式：

1. 批量 3D 模型 (b3dm) - 基于 glTF。
2. 点云。

在内部，加载程序使用 loaders.gl 库，该库是 vis.gl 平台的一部分，由城市计算基金会公开管理。 Cesium 与 loaders.gl 密切合作，创建了 3D Tiles 查看器的独立于平台的实现。

该库的开发始于《纽约时报 R&D》，旨在在 3D Tiles 规范和广泛使用的 3D 库 Three.js 之间建立一座清晰的桥梁。该库帮助我们向桌面和移动读者等提供大量 3D 和地理新闻。从重新移植到远程移植！

---

演示

• 在 RealityCapture 中将摄影测量导出到 3D Tiles
• LiDAR 点云作为 3D Tiles 托管在 Cesium ION 中
• 使用 OpenStreetMap 进行地图叠加
• Google 地图真实感 3D 瓷砖
• 具有 GeoJSON 悬垂效果的 Google 3D Tiles（实验性）

---

基本用法

下面是一个使用Loader3DTiles模块查看包含 3D 图块层次结构的tileset.json简单示例。

 import { 
  Scene , 
  PerspectiveCamera , 
  WebGLRenderer , 
  Clock 
} from 'three'
import { Loader3DTiles } from 'three-loader-3dtiles' ;

const scene = new Scene ( )
const camera = new PerspectiveCamera ( )
const renderer = new WebGLRenderer ( )
const clock = new Clock ( )

renderer . setSize ( window . innerWidth , window . innerHeight )
document . body . appendChild ( renderer . domElement )

let tilesRuntime = null ;

async function loadTileset ( ) {
  const result = await Loader3DTiles . load (
      url : 'https://<TILESET URL>/tileset.json' ,
      viewport : {
        width : window . innerWidth ,
        height : window . innerHeight ,
        devicePixelRatio : window . devicePixelRatio
      }
      options : {
        dracoDecoderPath : 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/libs/draco' ,
        basisTranscoderPath : 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/libs/basis' ,
      }
  )
  const { model , runtime } = result
  tilesRuntime = runtime
  scene . add ( model )
}

function render ( ) {
  const dt = clock . getDelta ( )
  if ( tilesRuntime ) {
    tilesRuntime . update ( dt , window . innerHeight , camera )
  }
  renderer . render ( scene , camera )
  window . requestAnimationFrame ( render )
}

loadTileset ( )
render ( ) 

---

安装

该库支持 Three.js r160 并使用其 GLTF、Draco 和 KTX2/Basis 加载器。有关目标浏览器，请参阅 package.json 中的browserslist字段。

1.ES模块

使用importmap从 npm 导入依赖项。请参阅此处查看完整示例。

index.html

 < script type =" importmap " >
  {
    "imports" : {
      "three" : "https://unpkg.com/[email protected]/build/three.module.js" ,
      "three/examples/jsm/" : "https://unpkg.com/[email protected]/examples/jsm/" ,
      "three-loader-3dtiles" : "https://unpkg.com/three-loader-3dtiles/dist/lib/three-loader-3dtiles.js"
    }
  }
</ script >
< script src =' index.js ' type =' module ' > 

index.js

 import { Scene , PerspectiveCamera } from 'three' ;
import { Loader3DTiles } from 'three-loader-3dtiles' ;

3.新公共管理

如果您使用 Webpack / Vite / Rollup 等构建系统，您还应该安装该库以及 npm 中的 Three.js：

 npm install -s three three-loader-3dtiles

应用程序脚本与 ES 模块示例中的相同（使用importmap时）。

请参阅此处查看完整的 webpack 示例。

4.A字架

请参阅我们专用的 A-Frame 组件：aframe-loader-3dtiles-component。

5.React-三纤维

请参阅示例/r3f。

---

路线图

接下来支持 3D 瓷砖

3D Tiles Next 规范正在制定中，其中一些功能已在 loaders.gl 中得到支持。支持新的扩展为新的应用程序开辟了可能性。

跳过遍历

实现跳过遍历机制可以极大地提高 b3dm（网格）图块的性能，但需要基于着色器/模板缓冲区的实现来手动管理 Z 剔除。这是一个非常需要的功能，我们将非常感谢您的贡献。

贡献

有关一般贡献说明，请参阅 CONTRIBUTING.MD。

发展

该库是使用 rollup 构建的。要运行简单的开发服务器类型：

 npm run dev

也可以在开发loaders.gl的同时开发库。只需克隆 loaders.gl 的源代码并运行：

 LOADERS_GL_SRC=<path to loaders.gl> npm run dev

建筑

要构建库，请运行：

 npm run build

要构建生产缩小版本，请运行：

 npm run build:production

并构建 API 文档运行：

 npm run docs

测试

基本的测试规范可在 ./test 中找到。要运行它，请输入：

 npm run test

文档

• API 文档可在此处获取。
• 演示的代码位于示例/演示中。

替代方案

据我们所知，这是唯一基于 loaders.gl 的 Three.js 库，但 Three.js 有多种 3D Tiles 实现。值得注意的例子：

• NASSA-AMMOS / 3DTilesRendererJS
• ebeaufay / 3DTilesViewer
• 智慧小镇

---

该存储库由《纽约时报》的研发团队维护，并按原样提供供您自己使用。有关《纽约时报》研发的更多信息，请访问 rd.nytimes.com