three loader 3dtiles

สาม-loader-3dtiles

การสาธิต — การใช้งาน — แผนการทำงาน — การสนับสนุน — เอกสาร — ทางเลือกอื่น

นี่คือโมดูลตัวโหลด Three.js สำหรับจัดการไทล์ OGC 3D ที่สร้างโดย Cesium ปัจจุบันรองรับสองรูปแบบหลัก:

1. โมเดล 3 มิติแบบแบตช์ (b3dm) - อิงตาม glTF
2. เมฆจุด.

ภายใน ตัวโหลดใช้ไลบรารี loaders.gl ซึ่งเป็นส่วนหนึ่งของแพลตฟอร์ม vis.gl ซึ่งอยู่ภายใต้การควบคุมอย่างเปิดเผยโดย Urban Computing Foundation Cesium ทำงานอย่างใกล้ชิดกับ loaders.gl เพื่อสร้างการใช้งานโปรแกรมดู 3D Tiles โดยไม่ขึ้นอยู่กับแพลตฟอร์ม

การพัฒนาห้องสมุดนี้เริ่มต้นที่ The New York Times R&D โดยเป็นความพยายามที่จะสร้างสะพานเชื่อมที่ชัดเจนระหว่างข้อกำหนด 3D Tiles และไลบรารี 3D Three.js ที่ใช้กันอย่างแพร่หลาย ห้องสมุดช่วยให้เราส่งมอบวารสารศาสตร์ 3 มิติและภูมิศาสตร์จำนวนมากไปยังเดสก์ท็อปและผู้อ่านมือถือ จาก Re porting สู่ Tele porting!

---

การสาธิต

• Photogrammetry ส่งออกไปยังไทล์ 3 มิติใน RealityCapture
• LiDAR Point Cloud โฮสต์เป็นไทล์ 3 มิติใน Cesium ION
• การซ้อนทับแผนที่ด้วย OpenStreetMap
• แผ่นกระเบื้อง 3 มิติเสมือนจริงของ Google Maps
• Google 3D Tiles พร้อม GeoJSON Draping (ทดลอง)

---

การใช้งานขั้นพื้นฐาน

นี่คือตัวอย่างง่ายๆ โดยใช้โมดูล Loader3DTiles เพื่อดู tileset.json ที่มีลำดับชั้นไทล์ 3 มิติ

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

---

การติดตั้ง

ไลบรารีรองรับ three.js r160 และใช้ตัวโหลด GLTF, Draco และ KTX2/Basis อ้างถึงช่อง browserslist ใน package.json สำหรับเบราว์เซอร์เป้าหมาย

1. โมดูล ES

ใช้ importmap เพื่อนำเข้าการอ้างอิงจาก npm ดูที่นี่สำหรับตัวอย่างเต็ม

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. เอ็นพีเอ็ม

หากคุณใช้ระบบบิลด์ เช่น Webpack / Vite / Rollup ฯลฯ คุณควรติดตั้งไลบรารีพร้อมกับ three.js จาก npm:

 npm install -s three three-loader-3dtiles

สคริปต์แอปพลิเคชันจะเหมือนกับในตัวอย่าง ES Module (เมื่อใช้ importmap )

ดูที่นี่สำหรับตัวอย่าง webpack ที่สมบูรณ์

4. เอ-เฟรม

โปรดดูส่วนประกอบ A-Frame เฉพาะของเรา: aframe-loader-3dtiles-component

5. ปฏิกิริยา-ทรี-ไฟเบอร์

อ้างอิงถึงตัวอย่าง/r3f

---

แผนการทำงาน

รองรับไทล์ 3D ถัดไป

ข้อมูลจำเพาะ 3D Tiles Next อยู่ในระหว่างการทำงาน โดยมีคุณสมบัติบางอย่างที่รองรับใน loaders.gl แล้ว การรองรับส่วนขยายใหม่จะเปิดโอกาสให้กับแอปพลิเคชันใหม่ๆ

ข้ามการสำรวจ

การใช้กลไกการข้ามผ่านข้ามสามารถปรับปรุงประสิทธิภาพของไทล์ b3dm (ตาข่าย) ได้อย่างมาก แต่ต้องใช้การใช้บัฟเฟอร์เชเดอร์/ลายฉลุซึ่งจัดการการเลือก Z ด้วยตนเอง นี่เป็นคุณสมบัติที่เป็นที่ต้องการมากและการสนับสนุนจะได้รับการชื่นชมอย่างมาก

มีส่วนร่วม

อ้างถึง CONTRIBUTING.MD สำหรับคำแนะนำทั่วไปในการบริจาค

กำลังพัฒนา

ไลบรารีถูกสร้างขึ้นโดยใช้การยกเลิก หากต้องการรันประเภทเซิร์ฟเวอร์การพัฒนาแบบง่าย:

 npm run dev

นอกจากนี้ยังสามารถพัฒนาไลบรารีในขณะที่พัฒนา loaders.gl ได้อีกด้วย เพียงโคลนซอร์สของ loaders.gl แล้วรัน:

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

อาคาร

หากต้องการสร้างไลบรารีให้รัน:

 npm run build

หากต้องการสร้างเวอร์ชันย่อส่วนที่ใช้งานจริงให้รัน:

 npm run build:production

และในการสร้างเอกสาร API ให้รัน:

 npm run docs

การทดสอบ

ดูข้อมูลจำเพาะการทดสอบเบื้องต้นได้ที่ ./test หากต้องการเรียกใช้ให้พิมพ์:

 npm run test

เอกสาร

• เอกสาร API มีอยู่ที่นี่
• รหัสสำหรับการสาธิตอยู่ในตัวอย่าง/การสาธิต

ทางเลือก

ตามความรู้ของเรา นี่เป็นไลบรารี Three.js ที่ใช้ loaders.gl เพียงแห่งเดียว แต่มีการใช้งาน 3D Tiles สำหรับ Three.js หลายประการ ตัวอย่างที่โดดเด่น:

• NASSA-AMMOS / 3DTilesRendererJS
• ebeaufay / 3DTilesViewer
• ไอทาวน์

---

พื้นที่เก็บข้อมูลนี้ได้รับการดูแลโดยทีมวิจัยและพัฒนาของ The New York Times และจัดเตรียมไว้ให้ตามสภาพที่คุณใช้งานเอง หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับการวิจัยและพัฒนาของ Times โปรดไปที่ rd.nytimes.com