3D Tiles Splat Layer

<script setup lang="ts">
  import { VMap, VControlNavigation } from '@geoql/v-maplibre';
  import { VLayer3DTiles } from '@geoql/v-maplibre/3d-tiles';

  // Peers: pnpm add three 3d-tiles-renderer \
  //          gaussian-splat-lite 3d-tiles-rendererjs-3dgs-plugin

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
    center: [139.7454, 35.6586],
    zoom: 20.5,
    pitch: 60,
    maxPitch: 85,
  };
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VLayer3DTiles
      id="splat-tileset"
      url="https://your-bucket.example.com/tileset.json"
      :error-target="8"
      :altitude="0"
      :rotation="[90, 0, 0]"
      :fade="true"
      :splats="true"
      @load-tileset="onLoadTileset"
    />
  </VMap>
</template>