three loader 3dtiles

três carregadores-3dtiles

Demonstrações — Uso — Roteiro — Contribuição — Documentos — Alternativas

Este é um módulo carregador Three.js para lidar com blocos 3D OGC, criado por Cesium. Atualmente suporta os dois formatos principais:

1. Modelo 3D em lote (b3dm) - baseado em glTF.
2. Nuvem de pontos.

Internamente, o carregador utiliza a biblioteca loaders.gl, que faz parte da plataforma vis.gl, governada abertamente pela Urban Computing Foundation. Cesium trabalhou em estreita colaboração com loaders.gl para criar uma implementação independente de plataforma de seu visualizador de blocos 3D.

O desenvolvimento desta biblioteca começou na pesquisa e desenvolvimento do The New York Times como um esforço para criar uma ponte limpa entre a especificação 3D Tiles e a biblioteca 3D amplamente utilizada Three.js. A biblioteca nos ajuda a entregar jornalismo 3D e geográfico massivo para desktops e leitores móveis. Da Re portabilidade à Teleportação !

---

Demonstrações

• Fotogrametria exportada para blocos 3D no RealityCapture
• LiDAR Point Cloud hospedado como blocos 3D em Cesium ION
• Sobreposição de mapa com OpenStreetMap
• Blocos 3D fotorrealistas do Google Maps
• Google 3D Tiles com GeoJSON Draping (experimental)

---

Uso Básico

Aqui está um exemplo simples usando o módulo Loader3DTiles para visualizar um tileset.json contendo uma hierarquia de blocos 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 ( ) 

---

Instalação

A biblioteca oferece suporte a three.js r160 e usa seus carregadores GLTF, Draco e KTX2/Basis. Consulte o campo browserslist em package.json para navegadores de destino.

1. Módulo ES

Use um importmap para importar as dependências do npm. Veja aqui um exemplo 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. NPM

Se você usa um sistema de compilação como Webpack/Vite/Rollup etc, você também deve instalar a biblioteca junto com three.js do npm:

 npm install -s three three-loader-3dtiles

O script do aplicativo seria o mesmo do exemplo do Módulo ES (ao usar importmap ).

Veja aqui um exemplo completo de webpack.

4. Moldura A

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

5. React-Três Fibras

Consulte exemplos/r3f.

---

Roteiro

A seguir, suporte a blocos 3D

A especificação 3D Tiles Next está em desenvolvimento, com alguns dos recursos já suportados em loaders.gl. O suporte às novas extensões abre possibilidades para novas aplicações.

Pular passagem

A implementação do mecanismo Skip traversal pode melhorar muito o desempenho dos blocos b3dm (malha), mas requer uma implementação baseada em buffer de shader/estêncil que gerencia manualmente o Z-culling. Este é um recurso muito procurado e as contribuições seriam muito apreciadas.

Contribuindo

Consulte CONTRIBUTING.MD para obter instruções gerais de contribuição.

Em desenvolvimento

A biblioteca é construída usando rollup. Para executar um tipo de servidor de desenvolvimento simples:

 npm run dev

Também é possível desenvolver a biblioteca enquanto desenvolve loaders.gl. Basta clonar a fonte de loaders.gl e executar:

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

Prédio

Para construir a biblioteca, execute:

 npm run build

Para construir a versão reduzida de produção, execute:

 npm run build:production

E para construir a documentação da API, execute:

 npm run docs

Testes

Uma especificação de teste rudimentar está disponível em ./test. Para executá-lo digite:

 npm run test

Documentos

• A documentação da API está disponível aqui.
• O código para as demonstrações está em exemplos/demos.

Alternativas

Até onde sabemos, esta é a única biblioteca Three.js baseada em loaders.gl, mas existem várias implementações de blocos 3D para Three.js. Exemplos notáveis:

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

---

Este repositório é mantido pela equipe de Pesquisa e Desenvolvimento do The New York Times e é fornecido no estado em que se encontra para seu próprio uso. Para obter mais informações sobre P&D no Times, visite rd.nytimes.com