three loader 3dtiles

три погрузчика-3dtiles

Демоверсии — Использование — Дорожная карта — Участие — Документы — Альтернативы

Это модуль загрузчика Three.js для обработки 3D-плиток OGC, созданный Cesium. В настоящее время он поддерживает два основных формата:

1. Пакетная 3D-модель (b3dm) — на основе glTF.
2. Облако точек.

Внутри загрузчик использует библиотеку loaders.gl, которая является частью платформы vis.gl, которой открыто управляет Urban Computing Foundation. Cesium тесно сотрудничал с loaders.gl для создания независимой от платформы реализации их средства просмотра 3D-плиток.

Разработка этой библиотеки началась в отделе исследований и разработок The New York Times как попытка создать чистый мост между спецификацией 3D Tiles и широко используемой 3D-библиотекой Three.js. Библиотека помогает нам предоставлять обширную 3D- и географическую журналистику как для настольных компьютеров, так и для мобильных устройств. От репортинга к телепортированию !

---

Демо

• Фотограмметрия экспортируется в 3D-плитки в RealityCapture
• Облако точек LiDAR размещено в виде 3D-плиток в Cesium ION
• Наложение карты с помощью OpenStreetMap
• Фотореалистичные 3D-плитки Google Maps
• 3D-плитки Google с драпировкой GeoJSON (экспериментальная версия)

---

Основное использование

Вот простой пример использования модуля Loader3DTiles для просмотра файла 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. Для определения целевых браузеров обратитесь к полю browserslist в package.json.

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 и т. д., вам также следует установить библиотеку вместе с Three.js из npm:

 npm install -s three three-loader-3dtiles

Сценарий приложения будет таким же, как в примере с модулем ES (при использовании importmap ).

Полный пример веб-пакета см. здесь.

4. А-образная рама

Обратитесь к нашему специальному компоненту A-Frame: aframe-loader-3dtiles-comment.

5. Реагирование-Три волокна

Обратитесь к примерам/r3f.

---

Дорожная карта

Поддержка 3D-плиток Далее

Спецификация 3D Tiles Next находится в разработке, некоторые функции уже поддерживаются в loaders.gl. Поддержка новых расширений открывает возможности для новых приложений.

Пропустить обход

Реализация механизма обхода Skip может значительно повысить производительность тайлов b3dm (сетки), но требует реализации на основе буфера шейдера/трафарета, которая вручную управляет Z-отбраковкой. Это очень нужная функция, и мы будем очень признательны за ее вклад.

Содействие

Обратитесь к CONTRIBUTING.MD за общими инструкциями по вкладу.

Разработка

Библиотека построена с использованием накопительного пакета. Чтобы запустить простой тип сервера разработки:

 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 доступна здесь.
• Код демо-версий находится в файле example/demos.

Альтернативы

Насколько нам известно, это единственная библиотека Three.js на основе loaders.gl, но существует несколько реализаций 3D Tiles для Three.js. Известные примеры:

• НАССА-АММОС / 3DTilesRendererJS
• ebeaufay / 3DTilesViewer
• iTowns

---

Этот репозиторий поддерживается командой исследований и разработок The New York Times и предоставляется «как есть» для вашего собственного использования. Для получения дополнительной информации об исследованиях и разработках в Times посетите сайт rd.nytimes.com.