three loader 3dtiles

ubin tiga pemuat-3d

Demo — Penggunaan — Peta Jalan — Berkontribusi — Dokumen — Alternatif

Ini adalah modul pemuat Three.js untuk menangani Ubin 3D OGC, yang dibuat oleh Cesium. Saat ini mendukung dua format utama:

1. Model 3D Batch (b3dm) - berdasarkan glTF.
2. Titik awan.

Secara internal, loader menggunakan perpustakaan loaders.gl, yang merupakan bagian dari platform vis.gl, yang secara terbuka diatur oleh Urban Computing Foundation. Cesium telah bekerja sama dengan loaders.gl untuk menciptakan implementasi penampil Ubin 3D mereka yang tidak bergantung pada platform.

Pengembangan perpustakaan ini dimulai di The New York Times R&D sebagai upaya untuk menciptakan jembatan yang bersih antara spesifikasi Ubin 3D dan perpustakaan 3D Three.js yang banyak digunakan. Perpustakaan membantu kami menghadirkan jurnalisme 3D dan Geografis secara masif ke pembaca desktop dan seluler. Dari Re porting ke Tele porting!

---

Demo

• Fotogrametri diekspor ke Ubin 3D di RealityCapture
• LiDAR Point Cloud dihosting sebagai Ubin 3D di Cesium ION
• Hamparan peta dengan OpenStreetMap
• Ubin 3D Fotorealistik Google Maps
• Ubin 3D Google dengan Draping GeoJSON (eksperimental)

---

Penggunaan Dasar

Berikut adalah contoh sederhana penggunaan modul Loader3DTiles untuk melihat tileset.json yang berisi hierarki ubin 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 ( ) 

---

Instalasi

Pustaka ini mendukung three.js r160 dan menggunakan pemuat GLTF, Draco, dan KTX2/Basis. Lihat bidang browserslist di package.json untuk browser target.

1. Modul ES

Gunakan importmap untuk mengimpor dependensi dari npm. Lihat di sini untuk contoh lengkapnya.

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

Jika Anda menggunakan sistem build seperti Webpack / Vite / Rollup dll, Anda juga harus menginstal perpustakaan bersama dengan three.js dari npm:

 npm install -s three three-loader-3dtiles

Skrip aplikasinya akan sama seperti pada contoh Modul ES (bila menggunakan importmap ).

Lihat di sini untuk contoh webpack lengkap.

4. Bingkai A

Lihat komponen A-Frame khusus kami: aframe-loader-3dtiles-component.

5. Bereaksi-Tiga-Serat

Lihat contoh/r3f.

---

Peta jalan

Mendukung Ubin 3D Berikutnya

Spesifikasi 3D Tiles Next sedang dalam pengerjaan, dengan beberapa fitur sudah didukung di loaders.gl. Mendukung ekstensi baru membuka kemungkinan untuk aplikasi baru.

Lewati-traversal

Menerapkan mekanisme Skip traversal dapat sangat meningkatkan kinerja ubin b3dm (mesh), tetapi memerlukan implementasi berbasis buffer shader/Stencil yang mengatur pemusnahan Z secara manual. Ini adalah fitur yang sangat diinginkan dan kontribusinya akan sangat dihargai.

Berkontribusi

Lihat CONTRIBUTING.MD untuk instruksi kontribusi umum.

Berkembang

Perpustakaan dibangun menggunakan rollup. Untuk menjalankan server pengembangan sederhana, ketik:

 npm run dev

Dimungkinkan juga untuk mengembangkan perpustakaan sambil mengembangkan loaders.gl. Cukup kloning sumber loaders.gl dan jalankan:

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

Bangunan

Untuk membangun perpustakaan, jalankan:

 npm run build

Untuk membangun versi produksi yang diperkecil, jalankan:

 npm run build:production

Dan untuk membangun dokumentasi API, jalankan:

 npm run docs

Tes

Spesifikasi pengujian dasar tersedia di ./test. Untuk menjalankannya ketik:

 npm run test

dokumen

• Dokumentasi API tersedia di sini.
• Kode untuk demo ada di contoh/demo.

Alternatif

Sepengetahuan kami, ini adalah satu-satunya pustaka Three.js berbasis loaders.gl, namun ada beberapa implementasi Ubin 3D untuk Three.js. Contoh penting:

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

---

Repositori ini dikelola oleh tim Penelitian & Pengembangan di The New York Times dan disediakan apa adanya untuk Anda gunakan sendiri. Untuk informasi lebih lanjut tentang Penelitian dan Pengembangan di Times, kunjungi rd.nytimes.com