three loader 3dtiles
1.0.0
데모 — 사용법 — 로드맵 — 기여 — 문서 — 대안
이것은 Cesium에서 만든 OGC 3D 타일을 처리하기 위한 Three.js 로더 모듈입니다. 현재 두 가지 주요 형식을 지원합니다.
내부적으로 로더는 Urban Computing Foundation에서 공개적으로 관리하는 vis.gl 플랫폼의 일부인 loaders.gl 라이브러리를 사용합니다. Cesium은 loaders.gl과 긴밀히 협력하여 3D 타일 뷰어의 플랫폼 독립적 구현을 만들었습니다.
이 라이브러리의 개발은 3D Tiles 사양과 널리 사용되는 3D 라이브러리 Three.js 사이를 깔끔하게 연결하려는 노력의 일환으로 New York Times R&D에서 시작되었습니다. 이 라이브러리는 데스크톱과 모바일 독자 모두에게 대규모 3D 및 지리학 저널리즘을 제공하는 데 도움이 됩니다. 리포팅 부터 텔레 포팅까지!
다음은 Loader3DTiles 모듈을 사용하여 3D 타일 계층 구조가 포함된 tileset.json 을 보는 간단한 예입니다.
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 로더를 사용합니다. 대상 브라우저는 package.json의 browserslist 필드를 참조하세요.
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' ;Webpack / Vite / Rollup 등과 같은 빌드 시스템을 사용하는 경우 npm에서 three.js와 함께 라이브러리도 설치해야 합니다.
npm install -s three three-loader-3dtiles
애플리케이션 스크립트는 ES 모듈 예제( importmap 사용 시)와 동일합니다.
전체 웹팩 예제는 여기를 참조하세요.
당사의 전용 A-Frame 구성 요소인 aframe-loader-3dtiles-composite를 참조하십시오.
예제/r3f를 참조하세요.
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
우리가 아는 바에 따르면 이는 유일한 loaders.gl 기반 Three.js 라이브러리이지만 Three.js용 3D 타일의 여러 구현이 있습니다. 주목할만한 예:
이 저장소는 The New York Times의 연구 개발 팀에서 관리하며 귀하가 사용할 수 있도록 있는 그대로 제공됩니다. Times의 R&D에 대한 자세한 내용을 알아보려면 rd.nytimes.com을 방문하세요.
