three loader 3dtiles

tres-cargador-3dtiles

Demostraciones - Uso - Hoja de ruta - Contribución - Documentos - Alternativas

Este es un módulo de carga Three.js para manejar OGC 3D Tiles, creado por Cesium. Actualmente soporta los dos formatos principales:

1. Modelo 3D por lotes (b3dm): basado en glTF.
2. Nube de puntos.

Internamente, el cargador utiliza la biblioteca loaders.gl, que forma parte de la plataforma vis.gl, abiertamente gobernada por la Urban Computing Foundation. Cesium ha trabajado estrechamente con loaders.gl para crear una implementación independiente de la plataforma de su visor 3D Tiles.

El desarrollo de esta biblioteca comenzó en The New York Times R&D como un esfuerzo por crear un puente limpio entre la especificación 3D Tiles y la biblioteca 3D ampliamente utilizada Three.js. La biblioteca nos ayuda a ofrecer periodismo geográfico y en 3D masivo tanto para lectores de escritorio como móviles. ¡De la reportación a la teleportación!

---

Población

• Fotogrametría exportada a mosaicos 3D en RealityCapture
• Nube de puntos LiDAR alojada como mosaicos 3D en Cesium ION
• Superposición de mapas con OpenStreetMap
• Azulejos 3D fotorrealistas de Google Maps
• Mosaicos 3D de Google con drapeado GeoJSON (experimental)

---

Uso básico

A continuación se muestra un ejemplo sencillo que utiliza el módulo Loader3DTiles para ver un tileset.json que contiene una jerarquía de mosaicos 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 ( ) 

---

Instalación

La biblioteca es compatible con three.js r160 y utiliza sus cargadores GLTF, Draco y KTX2/Basis. Consulte el campo browserslist en package.json para conocer los navegadores de destino.

1. Módulo ES

Utilice un importmap para importar las dependencias desde npm. Consulte aquí para ver un ejemplo completo.

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 utiliza un sistema de compilación como Webpack/Vite/Rollup, etc., también debe instalar la biblioteca junto con three.js de npm:

 npm install -s three three-loader-3dtiles

El script de la aplicación sería el mismo que en el ejemplo del módulo ES (cuando se usa importmap ).

Consulte aquí para ver un ejemplo completo de paquete web.

4. Marco en A

Consulte nuestro componente A-Frame dedicado: aframe-loader-3dtiles-component.

5. Reaccionar tres fibras

Consulte ejemplos/r3f.

---

Hoja de ruta

Compatibilidad con mosaicos 3D Siguiente

La especificación 3D Tiles Next está en proceso, y algunas de las funciones ya son compatibles con loaders.gl. La compatibilidad con las nuevas extensiones abre posibilidades para nuevas aplicaciones.

Saltar recorrido

La implementación del mecanismo de salto transversal podría mejorar en gran medida el rendimiento de los mosaicos b3dm (malla), pero requiere una implementación basada en búfer de sombreador/Stencil que administre manualmente el Z-culling. Esta es una característica muy buscada y las contribuciones serán muy apreciadas.

Contribuyendo

Consulte CONTRIBUTING.MD para obtener instrucciones generales sobre contribuciones.

Desarrollo

La biblioteca se construye mediante rollup. Para ejecutar un tipo de servidor de desarrollo simple:

 npm run dev

También es posible desarrollar la biblioteca mientras se desarrolla loaders.gl. Simplemente clona la fuente de loaders.gl y ejecuta:

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

Edificio

Para construir la biblioteca ejecute:

 npm run build

Para construir la versión minimizada de producción, ejecute:

 npm run build:production

Y para crear la documentación de la API, ejecute:

 npm run docs

Pruebas

Una especificación de prueba rudimentaria está disponible en ./test. Para ejecutarlo escriba:

 npm run test

Documentos

• La documentación API está disponible aquí.
• El código para las demostraciones está en ejemplos/demos.

Alternativas

Hasta donde sabemos, esta es la única biblioteca Three.js basada en loaders.gl, pero existen varias implementaciones de 3D Tiles para Three.js. Ejemplos notables:

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

---

Este repositorio lo mantiene el equipo de Investigación y Desarrollo de The New York Times y se proporciona tal como está para su propio uso. Para obtener más información sobre I+D en el Times, visite rd.nytimes.com