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