three loader 3dtiles

trois-chargeurs-3dtiles

Démos — Utilisation — Feuille de route — Contribuer — Documents — Alternatives

Il s'agit d'un module de chargement Three.js pour gérer les tuiles OGC 3D, créé par Cesium. Il prend actuellement en charge les deux formats principaux :

1. Modèle 3D par lots (b3dm) - basé sur glTF.
2. Nuage de points.

En interne, le chargeur utilise la bibliothèque loaders.gl, qui fait partie de la plateforme vis.gl, ouvertement régie par l'Urban Computing Foundation. Cesium a travaillé en étroite collaboration avec loaders.gl pour créer une implémentation indépendante de la plate-forme de leur visionneuse de tuiles 3D.

Le développement de cette bibliothèque a commencé au sein du département R&D du New York Times dans le but de créer un pont clair entre la spécification 3D Tiles et la bibliothèque 3D largement utilisée Three.js. La bibliothèque nous aide à proposer un journalisme 3D et géographique massif aux lecteurs de bureau et mobiles. Du reporting au téléportage !

---

Démos

• Photogrammétrie exportée vers des tuiles 3D dans RealityCapture
• Nuage de points LiDAR hébergé sous forme de tuiles 3D dans Cesium ION
• Superposition de cartes avec OpenStreetMap
• Tuiles 3D photoréalistes de Google Maps
• Tuiles Google 3D avec drapage GeoJSON (expérimental)

---

Utilisation de base

Voici un exemple simple utilisant le module Loader3DTiles pour afficher un tileset.json contenant une hiérarchie de tuiles 3D.

 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 ( ) 

---

Installation

La bibliothèque prend en charge three.js r160 et utilise ses chargeurs GLTF, Draco et KTX2/Basis. Reportez-vous au champ browserslist dans package.json pour les navigateurs cibles.

1. Module ES

Utilisez un importmap pour importer les dépendances du npm. Voir ici pour un exemple complet.

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. MNP

Si vous utilisez un système de build tel que Webpack / Vite / Rollup, etc., vous devez également installer la bibliothèque avec three.js à partir de npm :

 npm install -s three three-loader-3dtiles

Le script d'application serait le même que dans l'exemple du module ES (lors de l'utilisation importmap ).

Voir ici pour un exemple complet de webpack.

4. Cadre en A

Reportez-vous à notre composant A-Frame dédié : aframe-loader-3dtiles-component.

5. Réagir à trois fibres

Reportez-vous aux exemples/r3f.

---

Feuille de route

Prise en charge des tuiles 3D Suivant

La spécification 3D Tiles Next est en préparation, avec certaines fonctionnalités déjà prises en charge dans loaders.gl. La prise en charge des nouvelles extensions ouvre des possibilités pour de nouvelles applications.

Saut de parcours

La mise en œuvre du mécanisme de traversée Skip pourrait grandement améliorer les performances des tuiles b3dm (mesh), mais nécessite une implémentation basée sur un tampon shader/Stencil qui gère manuellement le Z-culling. Il s'agit d'une fonctionnalité très recherchée et les contributions seraient grandement appréciées.

Contribuer

Reportez-vous à CONTRIBUTING.MD pour les instructions générales de contribution.

Développement

La bibliothèque est construite à l'aide d'un rollup. Pour exécuter un type de serveur de développement simple :

 npm run dev

Il est également possible de développer la bibliothèque en développant loaders.gl. Clonez simplement la source de loaders.gl et exécutez :

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

Bâtiment

Pour construire la bibliothèque, exécutez :

 npm run build

Pour créer la version de production réduite, exécutez :

 npm run build:production

Et pour créer la documentation de l'API, exécutez :

 npm run docs

Essais

Une spécification de test rudimentaire est disponible sur ./test. Pour l'exécuter, tapez :

 npm run test

Documents

• La documentation de l'API est disponible ici.
• Le code des démos se trouve dans les exemples/démos.

Alternatives

À notre connaissance, il s'agit de la seule bibliothèque Three.js basée sur loaders.gl, mais il existe plusieurs implémentations de tuiles 3D pour Three.js. Exemples notables :

• NASSA-AMMOS / 3DTilesRendererJS
• ebeaufay / 3DTilesViewer
• iVilles

---

Ce référentiel est géré par l'équipe de recherche et développement du New York Times et est fourni tel quel pour votre propre usage. Pour plus d’informations sur la R&D au Times, visitez rd.nytimes.com