コンテンツにスキップ

3D Tiles Layer

3d-tiles レイヤーは、3d-tiles の Source（3D Tiles 形式の大規模な 3D データセット。建物モデル、点群、フォトリアルなタイルなど）を、モデルの見た目で描画します。

プロパティ

Section titled “プロパティ”
プロパティ型説明
type"3d-tiles"レイヤータイプ（必須）。
sourceSource | string3d-tiles の Source（必須）。

描画オプション

Section titled “描画オプション”
マテリアル設定キー説明
ModelMaterialmodel3D モデルの見た目を制御します。

使用例

Section titled “使用例”

基本的なタイルセット

Section titled “基本的なタイルセット”
import ThreeView, { Color } from "@navaramap/three";


const view = new ThreeView(/* options */);
await view.init();


const tileset = view.addSource({
  type: "3d-tiles",
  url: "https://example.com/tileset.json",
});


view.addLayer({
  type: "3d-tiles",
  source: tileset,
  model: { show: true, color: new Color().setHex(0xffffff), metalness: 0.1, roughness: 0.1 },
});

Google Photorealistic 3D Tiles

Section titled “Google Photorealistic 3D Tiles”
const tileset = view.addSource({
  type: "3d-tiles",
  url: `https://tile.googleapis.com/v1/3dtiles/root.json?key=${YOUR_GOOGLE_MAPS_API_KEY}`,
});


const layer = view.addLayer({ type: "3d-tiles", source: tileset, model: { maxSse: 30 } });

関連リソース

Section titled “関連リソース”