three loader 3dtiles
1.0.0
デモ — 使用法 — ロードマップ — 貢献 — ドキュメント — 代替案
これは、Cesium によって作成された、OGC 3D タイルを処理するための Three.js ローダー モジュールです。現在、次の 2 つの主要な形式をサポートしています。
内部的には、ローダーは、アーバン コンピューティング財団によって公開的に管理されている vis.gl プラットフォームの一部である、loaders.gl ライブラリを使用します。 Cesium は、loaders.gl と緊密に連携して、プラットフォームに依存しない 3D タイル ビューアの実装を作成しました。
このライブラリの開発は、3D タイル仕様と広く使用されている 3D ライブラリ Three.js の間にクリーンなブリッジを作成する取り組みとして、ニューヨーク タイムズ 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使用する場合)。
完全な Webpack の例については、ここを参照してください。
専用の A-Frame コンポーネント: aframe-loader-3dtiles-component を参照してください。
例/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タイルの実装はいくつかあります。注目すべき例:
このリポジトリは、ニューヨーク タイムズの研究開発チームによって維持されており、お客様自身の使用のために現状のまま提供されます。タイムズの研究開発について詳しくは、rd.nytimes.com をご覧ください。
