@more-than-software/mapkit 0.1.0

package/dist/src/plugins/TileCreasedNormalsPlugin.ts

@@ -0,0 +1,64 @@
+import { Vector3 } from 'three'
+import { toCreasedNormals as toCreasedNormalsImpl } from 'three/addons/utils/BufferGeometryUtils.js'
+import type { Tile } from '3d-tiles-renderer'
+import { BufferGeometry, Mesh, type Object3D } from 'three'
+
+export interface TileCreasedNormalsPluginOptions {
+  creaseAngle?: number
+}
+
+async function toCreasedNormalsAsync(
+  geometry: BufferGeometry,
+  creaseAngle?: number
+): Promise<BufferGeometry> {
+  const result = toCreasedNormalsImpl(geometry, creaseAngle)
+
+  // Triangles can be degenerate lines, producing zero normals and eventually
+  // causing NaN values under SH. Fix this by replacing them with a non-zero
+  // normal (they are hardly visible because they are degenerate).
+  // See: https://github.com/takram-design-engineering/three-geospatial/issues/13
+  const normal = result.getAttribute('normal')
+  if (normal) {
+    const v0 = new Vector3()
+    const v1 = new Vector3()
+    const v2 = new Vector3()
+    for (let i = 0; i < normal.count; i += 3) {
+      v0.fromBufferAttribute(normal, i + 0)
+      v1.fromBufferAttribute(normal, i + 1)
+      v2.fromBufferAttribute(normal, i + 2)
+      if (v0.length() < 0.5 || v1.length() < 0.5 || v2.length() < 0.5) {
+        normal.setXYZ(i + 0, 0, 0, 1)
+        normal.setXYZ(i + 1, 0, 0, 1)
+        normal.setXYZ(i + 2, 0, 0, 1)
+      }
+    }
+  }
+
+  return result
+}
+
+export class TileCreasedNormalsPlugin {
+  readonly options: TileCreasedNormalsPluginOptions
+
+  constructor(options?: TileCreasedNormalsPluginOptions) {
+    this.options = { ...options }
+  }
+
+  // Plugin method
+  async processTileModel(scene: Object3D, tile: Tile): Promise<void> {
+    const meshes: Mesh[] = []
+    scene.traverse(object => {
+      if (object instanceof Mesh && object.geometry instanceof BufferGeometry) {
+        meshes.push(object)
+      }
+    })
+    await Promise.all(
+      meshes.map(async mesh => {
+        mesh.geometry = await toCreasedNormalsAsync(
+          mesh.geometry,
+          this.options.creaseAngle
+        )
+      })
+    )
+  }
+}

package/dist/src/utils/camera.ts

@@ -0,0 +1,60 @@
+import { type Camera } from 'three'
+import { Geodetic, PointOfView, radians, degrees, Ellipsoid } from '@takram/three-geospatial'
+
+import type { CameraView } from '../index'
+
+/**
+ * Set camera position and orientation from a CameraView
+ */
+export function setCameraView(
+  camera: Camera,
+  view: CameraView,
+  ellipsoid: Ellipsoid = Ellipsoid.WGS84
+): void {
+  new PointOfView(
+    view.distance,
+    radians(view.heading),
+    radians(view.pitch)
+  ).decompose(
+    new Geodetic(radians(view.longitude), radians(view.latitude)).toECEF(
+      undefined,
+      { ellipsoid }
+    ),
+    camera.position,
+    camera.quaternion,
+    camera.up
+  )
+
+  if (view.fov != null && 'fov' in camera && typeof camera.fov === 'number') {
+    camera.fov = view.fov
+    if ('updateProjectionMatrix' in camera && typeof camera.updateProjectionMatrix === 'function') {
+      camera.updateProjectionMatrix()
+    }
+  }
+}
+
+/**
+ * Get current camera view
+ */
+export function getCameraView(
+  camera: Camera,
+  ellipsoid: Ellipsoid = Ellipsoid.WGS84
+): CameraView | null {
+  const pov = new PointOfView()
+  const result = pov.setFromCamera(camera, ellipsoid)
+  if (result == null) {
+    return null
+  }
+
+  const geodetic = new Geodetic()
+  geodetic.setFromECEF(camera.position, { ellipsoid })
+
+  return {
+    latitude: degrees(geodetic.latitude),
+    longitude: degrees(geodetic.longitude),
+    heading: degrees(pov.heading),
+    pitch: degrees(pov.pitch),
+    distance: pov.distance,
+    fov: 'fov' in camera && typeof camera.fov === 'number' ? camera.fov : undefined
+  }
+}

package/dist/src/utils/flyTo.ts

@@ -0,0 +1,118 @@
+import type { Camera } from 'three'
+import type { GlobeControls } from '3d-tiles-renderer'
+
+import { setCameraView, getCameraView } from './camera'
+import type { CameraView } from '../index'
+
+export interface FlyToOptions {
+  duration?: number
+  easing?: (t: number) => number
+}
+
+/**
+ * Interpolate angle using shortest path (handles wrapping at 360°)
+ * Returns the interpolated angle in degrees
+ */
+function interpolateAngle(start: number, end: number, t: number): number {
+  // Normalize angles to [0, 360)
+  const normalize = (angle: number) => {
+    angle = angle % 360
+    return angle < 0 ? angle + 360 : angle
+  }
+
+  const startNorm = normalize(start)
+  const endNorm = normalize(end)
+
+  // Calculate the difference
+  let diff = endNorm - startNorm
+
+  // Find shortest path: if difference > 180°, go the other way
+  if (diff > 180) {
+    diff -= 360
+  } else if (diff < -180) {
+    diff += 360
+  }
+
+  // Interpolate and normalize result
+  const result = normalize(startNorm + diff * t)
+  return result
+}
+
+/**
+ * Interpolate longitude using shortest path (handles wrapping at ±180°)
+ * Returns the interpolated longitude in degrees
+ */
+function interpolateLongitude(start: number, end: number, t: number): number {
+  // Normalize longitudes to [-180, 180)
+  const normalize = (lon: number) => {
+    lon = lon % 360
+    if (lon > 180) lon -= 360
+    if (lon < -180) lon += 360
+    return lon
+  }
+
+  const startNorm = normalize(start)
+  const endNorm = normalize(end)
+
+  // Calculate the difference
+  let diff = endNorm - startNorm
+
+  // Find shortest path: if difference > 180°, go the other way
+  if (diff > 180) {
+    diff -= 360
+  } else if (diff < -180) {
+    diff += 360
+  }
+
+  // Interpolate and normalize result
+  return normalize(startNorm + diff * t)
+}
+
+/**
+ * Imperative flyTo function for animating camera to a target view
+ * Returns a promise that resolves when animation completes
+ */
+export async function flyTo(
+  camera: Camera,
+  controls: GlobeControls | null,
+  targetView: CameraView,
+  options?: FlyToOptions
+): Promise<void> {
+  const duration = options?.duration ?? 2000
+  const easing = options?.easing ?? ((t: number) => t * (2 - t)) // ease-out
+  const startTime = Date.now()
+
+  const startView = getCameraView(camera)
+  if (startView == null) {
+    setCameraView(camera, targetView)
+    return Promise.resolve()
+  }
+
+  return new Promise(resolve => {
+    const animate = () => {
+      const elapsed = Date.now() - startTime
+      const progress = Math.min(elapsed / duration, 1)
+      const eased = easing(progress)
+
+      const currentView: CameraView = {
+        latitude: startView.latitude + (targetView.latitude - startView.latitude) * eased,
+        longitude: interpolateLongitude(startView.longitude, targetView.longitude, eased),
+        heading: interpolateAngle(startView.heading, targetView.heading, eased),
+        pitch: startView.pitch + (targetView.pitch - startView.pitch) * eased,
+        distance: startView.distance + (targetView.distance - startView.distance) * eased,
+        fov: targetView.fov != null
+          ? (startView.fov ?? 50) + (targetView.fov - (startView.fov ?? 50)) * eased
+          : undefined
+      }
+
+      setCameraView(camera, currentView)
+
+      if (progress < 1) {
+        requestAnimationFrame(animate)
+      } else {
+        resolve()
+      }
+    }
+    animate()
+  })
+}

package/dist/src/utils/presets.ts

@@ -0,0 +1,63 @@
+import type { CameraView } from '../index'
+
+const presets = new Map<string, CameraView>()
+
+/**
+ * Create a named camera preset
+ */
+export function createPreset(name: string, view: CameraView): void {
+  presets.set(name, { ...view })
+}
+
+/**
+ * Get a preset by name
+ */
+export function getPreset(name: string): CameraView | undefined {
+  return presets.get(name)
+}
+
+/**
+ * Common location presets
+ */
+export const commonPresets: Record<string, CameraView> = {
+  tokyo: {
+    latitude: 35.6812,
+    longitude: 139.7671,
+    heading: 180,
+    pitch: -30,
+    distance: 4500
+  },
+  london: {
+    latitude: 51.5074,
+    longitude: -0.1278,
+    heading: 0,
+    pitch: -30,
+    distance: 5000
+  },
+  'new-york': {
+    latitude: 40.7128,
+    longitude: -74.0060,
+    heading: 0,
+    pitch: -30,
+    distance: 5000
+  },
+  paris: {
+    latitude: 48.8566,
+    longitude: 2.3522,
+    heading: 0,
+    pitch: -30,
+    distance: 5000
+  },
+  sydney: {
+    latitude: -33.8688,
+    longitude: 151.2093,
+    heading: 0,
+    pitch: -30,
+    distance: 5000
+  }
+}
+
+// Initialize common presets
+Object.entries(commonPresets).forEach(([name, view]) => {
+  createPreset(name, view)
+})

package/dist/utils/camera.d.ts

@@ -0,0 +1,12 @@
+import { Camera } from 'three';
+import { Ellipsoid } from '@takram/three-geospatial';
+import { CameraView } from '../index';
+/**
+ * Set camera position and orientation from a CameraView
+ */
+export declare function setCameraView(camera: Camera, view: CameraView, ellipsoid?: Ellipsoid): void;
+/**
+ * Get current camera view
+ */
+export declare function getCameraView(camera: Camera, ellipsoid?: Ellipsoid): CameraView | null;
+//# sourceMappingURL=camera.d.ts.map

package/dist/utils/camera.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"camera.d.ts","sourceRoot":"","sources":["../../src/utils/camera.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAA2C,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAE7F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C;;GAEG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,UAAU,EAChB,SAAS,GAAE,SAA2B,GACrC,IAAI,CAqBN;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,MAAM,EACd,SAAS,GAAE,SAA2B,GACrC,UAAU,GAAG,IAAI,CAkBnB"}

package/dist/utils/flyTo.d.ts

@@ -0,0 +1,13 @@
+import { Camera } from 'three';
+import { GlobeControls } from '3d-tiles-renderer';
+import { CameraView } from '../index';
+export interface FlyToOptions {
+    duration?: number;
+    easing?: (t: number) => number;
+}
+/**
+ * Imperative flyTo function for animating camera to a target view
+ * Returns a promise that resolves when animation completes
+ */
+export declare function flyTo(camera: Camera, controls: GlobeControls | null, targetView: CameraView, options?: FlyToOptions): Promise<void>;
+//# sourceMappingURL=flyTo.d.ts.map

package/dist/utils/flyTo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flyTo.d.ts","sourceRoot":"","sources":["../../src/utils/flyTo.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAC/B;AA6DD;;;GAGG;AACH,wBAAsB,KAAK,CACzB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,aAAa,GAAG,IAAI,EAC9B,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,YAAY,GACrB,OAAO,CAAC,IAAI,CAAC,CAsCf"}

package/dist/utils/presets.d.ts

@@ -0,0 +1,14 @@
+import { CameraView } from '../index';
+/**
+ * Create a named camera preset
+ */
+export declare function createPreset(name: string, view: CameraView): void;
+/**
+ * Get a preset by name
+ */
+export declare function getPreset(name: string): CameraView | undefined;
+/**
+ * Common location presets
+ */
+export declare const commonPresets: Record<string, CameraView>;
+//# sourceMappingURL=presets.d.ts.map

package/dist/utils/presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/utils/presets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAI1C;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI,CAEjE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAE9D;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAoCpD,CAAA"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@more-than-software/mapkit",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/more-than-software/citykit.git",
+    "directory": "packages/mapkit"
+  },
+  "keywords": [
+    "react",
+    "three.js",
+    "3d-tiles",
+    "google-maps",
+    "geospatial",
+    "globe",
+    "map",
+    "react-three-fiber"
+  ],
+  "dependencies": {
+    "3d-tiles-renderer": "0.4.21",
+    "@takram/three-atmosphere": "^0.16.0",
+    "@takram/three-clouds": "^0.16.0",
+    "@takram/three-geospatial": "^0.6.0",
+    "@takram/three-geospatial-effects": "^0.6.0",
+    "motion": "^12.34.2",
+    "postprocessing": "^6.38.2",
+    "react-merge-refs": "^3.0.2",
+    "tiny-invariant": "^1.3.3"
+  },
+  "peerDependencies": {
+    "@react-three/drei": "^10.0.0",
+    "@react-three/fiber": "^9.0.0",
+    "@react-three/postprocessing": "^3.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "three": "^0.180.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}