three loader 3dtiles
1.0.0
Demos – Nutzung – Roadmap – Mitwirken – Dokumente – Alternativen
Dies ist ein von Cesium erstelltes Three.js-Lademodul für die Verarbeitung von OGC-3D-Kacheln. Derzeit werden die beiden Hauptformate unterstützt:
Intern verwendet der Loader die Bibliothek „loaders.gl“, die Teil der vis.gl-Plattform ist und offen von der Urban Computing Foundation verwaltet wird. Cesium hat eng mit Loaders.gl zusammengearbeitet, um eine plattformunabhängige Implementierung ihres 3D-Kachel-Viewers zu erstellen.
Die Entwicklung dieser Bibliothek begann bei der Forschung und Entwicklung der New York Times mit dem Ziel, eine saubere Brücke zwischen der 3D-Kacheln-Spezifikation und der weit verbreiteten 3D-Bibliothek Three.js zu schaffen. Die Bibliothek hilft uns dabei, umfassenden 3D- und geografischen Journalismus sowohl für Desktop-Computer als auch für mobile Leser bereitzustellen. Von der Berichterstattung zur Teleportierung !
Hier ist ein einfaches Beispiel für die Verwendung des Loader3DTiles -Moduls zum Anzeigen einer tileset.json die eine 3D-Kachelhierarchie enthält.
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 ( ) Die Bibliothek unterstützt three.js r160 und verwendet deren GLTF-, Draco- und KTX2/Basis-Loader. Informationen zu Zielbrowsern finden Sie im Feld browserslist in package.json.
Verwenden Sie eine importmap um die Abhängigkeiten aus dem npm zu importieren. Ein vollständiges Beispiel finden Sie hier.
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' ;Wenn Sie ein Build-System wie Webpack / Vite / Rollup usw. verwenden, sollten Sie auch die Bibliothek zusammen mit three.js von npm installieren:
npm install -s three three-loader-3dtiles
Das Anwendungsskript wäre dasselbe wie im ES-Modul-Beispiel (bei Verwendung von importmap ).
Hier finden Sie ein vollständiges Webpack-Beispiel.
Weitere Informationen finden Sie in unserer speziellen A-Frame-Komponente: aframe-loader-3dtiles-component.
Siehe Beispiele/r3f.
Die 3D Tiles Next-Spezifikation ist in Arbeit, wobei einige der Funktionen bereits in Loaders.gl unterstützt werden. Die Unterstützung der neuen Erweiterungen eröffnet Möglichkeiten für neue Anwendungen.
Die Implementierung des Skip-Traversal-Mechanismus könnte die Leistung von B3DM-Kacheln (Mesh) erheblich verbessern, erfordert jedoch eine Shader-/Stencil-Puffer-basierte Implementierung, die das Z-Culling manuell verwaltet. Dies ist eine sehr gewünschte Funktion und Beiträge wären sehr dankbar.
Allgemeine Anweisungen zum Beitragen finden Sie unter CONTRIBUTING.MD.
Die Bibliothek wird mithilfe von Rollup erstellt. Um einen einfachen Entwicklungsserver auszuführen, geben Sie Folgendes ein:
npm run dev
Es ist auch möglich, die Bibliothek während der Entwicklung von loaders.gl zu entwickeln. Klonen Sie einfach die Quelle von loaders.gl und führen Sie Folgendes aus:
LOADERS_GL_SRC=<path to loaders.gl> npm run dev
Um die Bibliothek zu erstellen, führen Sie Folgendes aus:
npm run build
Um die minimierte Produktionsversion zu erstellen, führen Sie Folgendes aus:
npm run build:production
Und um die API-Dokumentation zu erstellen, führen Sie Folgendes aus:
npm run docs
Eine rudimentäre Testspezifikation ist unter ./test verfügbar. Um es auszuführen, geben Sie Folgendes ein:
npm run test
Unseres Wissens ist dies die einzige auf Loaders.gl basierende Three.js-Bibliothek, es gibt jedoch mehrere Implementierungen von 3D-Kacheln für Three.js. Bemerkenswerte Beispiele:
Dieses Repository wird vom Forschungs- und Entwicklungsteam der New York Times gepflegt und steht Ihnen unverändert für Ihren eigenen Gebrauch zur Verfügung. Weitere Informationen über Forschung und Entwicklung bei der Times finden Sie unter rd.nytimes.com
