@navaramap/three-plugins 0.0.0

package/dist/index.js

@@ -0,0 +1,553 @@
+import { EventHandler as e, Plugin as t, convertWorldToScreen as n, degreeToRadian as r, eastNorthUpToFixedFrame as i, geodeticToVector3 as a, radianToDegree as o, vector3ToGeodetic as s } from "@navaramap/three";
+import { Matrix4 as c, Vector3 as l } from "three";
+//#region src/PersonViewPlugin.ts
+var u = {
+	x: 0,
+	y: 0,
+	z: 0
+}, d = {
+	forward: ["KeyW"],
+	backward: ["KeyS"],
+	turnLeft: ["KeyA"],
+	turnRight: ["KeyD"],
+	ascend: ["ArrowUp", "Space"],
+	descend: [
+		"ArrowDown",
+		"ControlLeft",
+		"ControlRight"
+	],
+	dash: ["ShiftLeft", "ShiftRight"],
+	orbitCamera: ["AltLeft", "AltRight"],
+	toggleView: ["KeyV"]
+}, f = {
+	allowCameraControl: !1,
+	initialView: "tpv",
+	moveSpeed: 50,
+	rotationSpeed: 3,
+	altSpeed: 30,
+	minAlt: 50,
+	maxAlt: 5e3,
+	cameraDistance: 50,
+	cameraPitch: 0,
+	cameraLerpSpeed: 3,
+	fpvForwardOffset: 0,
+	fpvHeightOffset: 1,
+	fpvPitch: 0,
+	startLat: 35.6812,
+	startLng: 139.7671,
+	startHeight: 500,
+	startHeading: Math.PI * 1.3
+}, p = 3, m = 1e3, h = class extends t {
+	view;
+	config;
+	character;
+	keys;
+	keyToAction;
+	handle = null;
+	modelRef = null;
+	animId = null;
+	lastTime = 0;
+	state;
+	listeners = /* @__PURE__ */ new Set();
+	heldActions = /* @__PURE__ */ new Set();
+	dashMultiplier = 1;
+	orbitKeyHeld = !1;
+	orbitLatched = !1;
+	currentAnimState;
+	modelHeading;
+	cameraHeading;
+	viewMode;
+	movementSuppressed = !1;
+	boundKeyDown;
+	boundKeyUp;
+	_curPos = new l();
+	_east = new l();
+	_north = new l();
+	_worldForward = new l();
+	_offset = new l();
+	_headingMatrix = new c();
+	_characterFrame = new c();
+	constructor(e = {}) {
+		super();
+		let { character: t, keys: n, ...r } = e;
+		this.config = {
+			...f,
+			...r
+		}, this.character = t ? this.resolveCharacter(t) : null, this.keys = {
+			...d,
+			...n
+		}, this.keyToAction = this.buildKeyMap(this.keys), this.modelHeading = this.config.startHeading, this.cameraHeading = this.config.startHeading, this.viewMode = this.config.initialView, this.currentAnimState = this.character ? this.character.animation.idleClip : null, this.boundKeyDown = this.onKeyDown.bind(this), this.boundKeyUp = this.onKeyUp.bind(this);
+	}
+	async init(e, t) {
+		this.view = e, this.state = {
+			lng: this.config.startLng,
+			lat: this.config.startLat,
+			alt: this.config.startHeight,
+			heading: this.config.startHeading,
+			speed: 0,
+			animationState: this.currentAnimState,
+			mode: this.viewMode
+		};
+	}
+	start() {
+		if (!this.view || this.animId != null) return;
+		this.animId = -1;
+		let { startLat: e, startLng: t, startHeight: n, startHeading: i } = this.config, o = a({
+			lat: r(e),
+			lng: r(t),
+			height: n
+		});
+		if (this.modelHeading = i, this.cameraHeading = i, this.character) {
+			let { animation: e, modelRotationOffset: t, modelScale: n, castShadow: r, receiveShadow: a } = this.character;
+			this.handle = this.view.addMesh({
+				gltfModel: {
+					url: this.character.modelUrl,
+					castShadow: r,
+					receiveShadow: a,
+					animationEnabled: !0,
+					animationAutoPlay: !0,
+					animationActiveClip: e.idleClip,
+					animationSpeed: e.speed,
+					animationLoop: !0,
+					animationCrossfadeDuration: e.crossfadeDuration
+				},
+				matrixWorld: this.composeCharacterFrame(o, i),
+				rotation: {
+					x: t.x,
+					y: t.y,
+					z: t.z
+				},
+				scale: {
+					x: n,
+					y: n,
+					z: n
+				}
+			}), this.modelRef = this.handle.ref, this.modelRef.on("load", () => {
+				this.view && (this.lastTime = performance.now(), this.animId = requestAnimationFrame(this.tick));
+			});
+		} else this.lastTime = performance.now(), this.animId = requestAnimationFrame(this.tick);
+		this.applyInitialCamera(), this.applyModelVisibility(), document.addEventListener("keydown", this.boundKeyDown), document.addEventListener("keyup", this.boundKeyUp);
+	}
+	teleport(e) {
+		if (!this.view) return;
+		let { lng: t, lat: n, alt: i } = e, o = e.heading == null ? this.cameraHeading : e.heading;
+		if (this.handle && this.character) {
+			let e = a({
+				lat: r(n),
+				lng: r(t),
+				height: i
+			});
+			this.handle.update({ matrixWorld: this.composeCharacterFrame(e, o) });
+		}
+		this.modelHeading = o, this.cameraHeading = o, this.placeChaseCamera(n, t, i, o), this.state = {
+			lng: t,
+			lat: n,
+			alt: i,
+			heading: o,
+			speed: 0,
+			animationState: this.currentAnimState,
+			mode: this.viewMode
+		}, this.notify();
+	}
+	getState() {
+		return this.state;
+	}
+	onStateChange(e) {
+		return this.listeners.add(e), () => this.listeners.delete(e);
+	}
+	setViewMode(e) {
+		this.viewMode !== e && (this.viewMode = e, this.state = {
+			...this.state,
+			mode: e
+		}, this.applyModelVisibility(), this.placeChaseCamera(this.state.lat, this.state.lng, this.state.alt, this.cameraHeading), this.notify());
+	}
+	toggleViewMode() {
+		this.setViewMode(this.viewMode === "tpv" ? "fpv" : "tpv");
+	}
+	setAllowCameraControl(e) {
+		this.config.allowCameraControl = e;
+	}
+	setHeading(e) {
+		if (!this.view) return;
+		let { lat: t, lng: n, alt: i } = this.state;
+		if (this.modelHeading = e, this.cameraHeading = e, this.handle && this.character) {
+			let o = a({
+				lat: r(t),
+				lng: r(n),
+				height: i
+			});
+			this.handle.update({ matrixWorld: this.composeCharacterFrame(o, e) });
+		}
+		this.isFreeCamera() || this.placeChaseCamera(t, n, i, e), this.state = {
+			...this.state,
+			heading: e
+		}, this.notify();
+	}
+	getHeading() {
+		return this.state.heading;
+	}
+	setCameraPitch(e) {
+		this.config.cameraPitch = e, this.isFreeCamera() || this.placeChaseCamera(this.state.lat, this.state.lng, this.state.alt, this.cameraHeading);
+	}
+	getCameraPitch() {
+		return this.config.cameraPitch;
+	}
+	setFpvPitch(e) {
+		this.config.fpvPitch = e, this.isFreeCamera() || this.placeChaseCamera(this.state.lat, this.state.lng, this.state.alt, this.cameraHeading);
+	}
+	getFpvPitch() {
+		return this.config.fpvPitch;
+	}
+	setFpvHeightOffset(e) {
+		this.config.fpvHeightOffset = e, this.isFreeCamera() || this.placeChaseCamera(this.state.lat, this.state.lng, this.state.alt, this.cameraHeading);
+	}
+	getFpvHeightOffset() {
+		return this.config.fpvHeightOffset;
+	}
+	dispose() {
+		this.animId != null && cancelAnimationFrame(this.animId), this.animId = null, document.removeEventListener("keydown", this.boundKeyDown), document.removeEventListener("keyup", this.boundKeyUp), this.handle &&= (this.handle.delete(), null), this.modelRef = null, this.heldActions.clear(), this.listeners.clear(), this.orbitKeyHeld = !1, this.orbitLatched = !1, this.dashMultiplier = 1, this.view = void 0;
+	}
+	resolveCharacter(e) {
+		return {
+			modelUrl: e.modelUrl,
+			animation: e.animation,
+			modelRotationOffset: e.modelRotationOffset ? {
+				...u,
+				...e.modelRotationOffset
+			} : u,
+			modelScale: e.modelScale ?? p,
+			hideModelInFpv: e.hideModelInFpv ?? !0,
+			castShadow: e.castShadow ?? !1,
+			receiveShadow: e.receiveShadow ?? !1
+		};
+	}
+	buildKeyMap(e) {
+		let t = /* @__PURE__ */ new Map(), n = (e, n) => {
+			for (let r of e) t.set(r, n);
+		};
+		return n(e.forward, "forward"), n(e.backward, "backward"), n(e.turnLeft, "turnLeft"), n(e.turnRight, "turnRight"), n(e.ascend, "ascend"), n(e.descend, "descend"), n(e.dash, "dash"), n(e.orbitCamera, "orbitCamera"), n(e.toggleView, "toggleView"), t;
+	}
+	isFreeCamera() {
+		return this.config.allowCameraControl || this.orbitKeyHeld || this.orbitLatched;
+	}
+	isMovementAction(e) {
+		return e === "forward" || e === "backward" || e === "turnLeft" || e === "turnRight" || e === "ascend" || e === "descend";
+	}
+	applyModelVisibility() {
+		if (!this.handle || !this.character) return;
+		let e = this.viewMode === "fpv" && this.character.hideModelInFpv;
+		this.handle.visible = !e;
+	}
+	applyInitialCamera() {
+		let { startLat: e, startLng: t, startHeight: n, startHeading: r } = this.config;
+		this.placeChaseCamera(e, t, n, r);
+	}
+	placeChaseCamera(e, t, n, r) {
+		if (!this.view) return;
+		let { cameraDistance: i, cameraPitch: a, fpvPitch: o, fpvHeightOffset: s, fpvForwardOffset: c } = this.config, l = this.viewMode === "fpv", u = n + s;
+		if (l) {
+			let n = m, i = c + m, a = Math.tan(o) * n, s = this.advanceLatLng(e, t, r, i);
+			this._offset.set(-Math.sin(r) * n, -Math.cos(r) * n, a), this.view.cameraFollow(!0, {
+				lat: s.lat,
+				lng: s.lng,
+				height: u - a
+			}, this._offset);
+			return;
+		}
+		let d = i * Math.cos(a), f = i * Math.sin(a);
+		this._offset.set(-Math.sin(r) * d, -Math.cos(r) * d, f), this.view.cameraFollow(!0, {
+			lat: e,
+			lng: t,
+			height: u
+		}, this._offset);
+	}
+	composeCharacterFrame(e, t) {
+		let n = i(e);
+		return this._headingMatrix.makeRotationZ(-t), this._characterFrame.multiplyMatrices(n, this._headingMatrix);
+	}
+	advanceLatLng(e, t, n, c) {
+		let l = a({
+			lat: r(e),
+			lng: r(t),
+			height: 0
+		}), u = i(l);
+		this._east.setFromMatrixColumn(u, 0).normalize(), this._north.setFromMatrixColumn(u, 1).normalize(), this._worldForward.copy(this._east).multiplyScalar(Math.sin(n)).addScaledVector(this._north, Math.cos(n)), l.addScaledVector(this._worldForward, c);
+		let d = s(l);
+		return {
+			lat: o(d.lat),
+			lng: o(d.lng)
+		};
+	}
+	notify() {
+		for (let e of this.listeners) e(this.state);
+	}
+	onKeyDown(e) {
+		let t = e.target;
+		if (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable) return;
+		let n = this.keyToAction.get(e.code);
+		if (n !== void 0) {
+			if (n === "toggleView") {
+				if (e.repeat) return;
+				this.toggleViewMode();
+				return;
+			}
+			if (n === "orbitCamera") {
+				this.orbitKeyHeld = !0, this.orbitLatched = !0;
+				return;
+			}
+			if (!this.movementSuppressed) {
+				if (n === "dash") {
+					this.dashMultiplier = 2.5;
+					return;
+				}
+				this.isMovementAction(n) && (this.orbitLatched = !1), this.heldActions.add(n);
+			}
+		}
+	}
+	onKeyUp(e) {
+		let t = this.keyToAction.get(e.code);
+		if (t !== void 0 && t !== "toggleView") {
+			if (t === "orbitCamera") {
+				this.orbitKeyHeld = !1;
+				return;
+			}
+			if (t === "dash") {
+				this.dashMultiplier = 1;
+				return;
+			}
+			this.heldActions.delete(t);
+		}
+	}
+	tick = (e) => {
+		if (!this.view) return;
+		this.animId = requestAnimationFrame(this.tick);
+		let t = Math.min((e - this.lastTime) / 1e3, .1);
+		this.lastTime = e;
+		let n = 0, c = 0, l = 0;
+		this.heldActions.has("forward") && (c += 1), this.heldActions.has("backward") && --c, this.heldActions.has("turnLeft") && --n, this.heldActions.has("turnRight") && (n += 1), this.heldActions.has("ascend") && (l += 1), this.heldActions.has("descend") && --l;
+		let { moveSpeed: u, rotationSpeed: d, altSpeed: f, minAlt: p, maxAlt: m, cameraLerpSpeed: h } = this.config;
+		n !== 0 && (this.modelHeading += r(d * n));
+		let g = this._curPos;
+		if (this.handle && this.modelRef) {
+			let e = this.modelRef.getWorldPosition();
+			if (!e) return;
+			g.copy(e);
+		} else g.copy(a({
+			lat: r(this.state.lat),
+			lng: r(this.state.lng),
+			height: this.state.alt
+		}));
+		let _ = i(g);
+		this._east.setFromMatrixColumn(_, 0).normalize(), this._north.setFromMatrixColumn(_, 1).normalize();
+		let v = s(g);
+		this._worldForward.copy(this._east).multiplyScalar(Math.sin(this.modelHeading)).addScaledVector(this._north, Math.cos(this.modelHeading)), c !== 0 && g.addScaledVector(this._worldForward, u * this.dashMultiplier * t * c);
+		let y = s(g), b = v.height + l * f * t, x = Math.max(p, Math.min(m, b)), S = o(y.lat), C = o(y.lng), w = x;
+		if (this.handle && this.character) {
+			let e = a({
+				lat: y.lat,
+				lng: y.lng,
+				height: x
+			});
+			this.handle.update({ matrixWorld: this.composeCharacterFrame(e, this.modelHeading) });
+		}
+		let T = this.modelHeading - this.cameraHeading;
+		if (T -= Math.round(T / (Math.PI * 2)) * (Math.PI * 2), this.cameraHeading += T * Math.min(t * h, 1), this.isFreeCamera()) if (this.viewMode === "fpv") {
+			let e = this.advanceLatLng(S, C, this.cameraHeading, this.config.fpvForwardOffset);
+			this.view.cameraFreeLook(!0, {
+				lat: e.lat,
+				lng: e.lng,
+				height: w + this.config.fpvHeightOffset
+			});
+		} else this.view.cameraFollow(!0, {
+			lat: S,
+			lng: C,
+			height: w + this.config.fpvHeightOffset
+		});
+		else this.placeChaseCamera(S, C, w, this.cameraHeading);
+		let E = c !== 0 || n !== 0 || l !== 0, D = E && this.dashMultiplier > 1, O = this.currentAnimState;
+		if (this.character && this.modelRef) {
+			let { animation: e } = this.character, t = e.walkClip ?? e.idleClip, n;
+			n = D ? e.dashClip : E ? t : e.idleClip, n !== this.currentAnimState && (this.modelRef.crossFadeAnimation(this.currentAnimState ?? "", n, e.crossfadeDuration), this.currentAnimState = n), O = n;
+		}
+		let k = {
+			lng: C,
+			lat: S,
+			alt: w,
+			heading: this.modelHeading,
+			speed: u * this.dashMultiplier,
+			animationState: O,
+			mode: this.viewMode
+		};
+		this.hasStateChanged(this.state, k) && (this.state = k, this.notify());
+	};
+	hasStateChanged(e, t) {
+		return e.lng !== t.lng || e.lat !== t.lat || e.alt !== t.alt || e.heading !== t.heading || e.speed !== t.speed || e.animationState !== t.animationState || e.mode !== t.mode;
+	}
+};
+//#endregion
+//#region src/OverlayPlugin.ts
+function g(e, t, n) {
+	e.style.transform = `translate(${t}px, ${n}px)`, e.style.willChange = "transform";
+}
+var _ = 1e5, v = class extends t {
+	view;
+	maxDistance;
+	positions = [];
+	projected = /* @__PURE__ */ new Map();
+	listeners = /* @__PURE__ */ new Set();
+	boundHandler;
+	constructor(e) {
+		super(), this.maxDistance = e?.maxDistance ?? _, this.boundHandler = this.handlePreRender.bind(this);
+	}
+	async init(e, t) {
+		this.view = e, e.on("preRender", this.boundHandler);
+	}
+	setPositions(e) {
+		this.positions = e;
+	}
+	onUpdate(e) {
+		return this.listeners.add(e), () => this.listeners.delete(e);
+	}
+	dispose() {
+		this.view && this.view.off("preRender", this.boundHandler), this.listeners.clear(), this.positions = [], this.projected.clear();
+	}
+	worldToScreen(e, t, i) {
+		if (!this.view) return null;
+		let o = a({
+			lng: r(e),
+			lat: r(t),
+			height: i
+		}), s = n({
+			width: this.view.screenSize.x,
+			height: this.view.screenSize.y,
+			pixelRatio: this.view.pixelRatio
+		}, this.view.camera.raw, o);
+		return s ? {
+			x: s.x,
+			y: s.y
+		} : null;
+	}
+	handlePreRender() {
+		if (!this.view) return;
+		let e = this.view.camera.positionGeographic, t = a({
+			lng: r(e.lng),
+			lat: r(e.lat),
+			height: e.height
+		}), n = /* @__PURE__ */ new Map();
+		for (let e of this.positions) {
+			let i = a({
+				lng: r(e.lng),
+				lat: r(e.lat),
+				height: e.alt
+			}), o = t.distanceTo(i);
+			if (o > this.maxDistance) continue;
+			let s = this.worldToScreen(e.lng, e.lat, e.alt);
+			s && n.set(e.id, {
+				...s,
+				distance: o
+			});
+		}
+		this.projected = n;
+		let i = { projected: this.projected };
+		for (let e of this.listeners) e(i);
+	}
+}, y = "https://api.cesium.com/v1/assets", b = class extends t {
+	view;
+	config;
+	endpoint;
+	constructor(e) {
+		super(), this.config = e;
+	}
+	async init(e, t) {
+		this.view = e;
+		let { assetId: n, accessToken: r, endpoint: i = y } = this.config, a = `${i}/${encodeURIComponent(String(n))}/endpoint?access_token=${encodeURIComponent(r)}`, o = await fetch(a);
+		if (!o.ok) throw Error(`CesiumIonPlugin: failed to fetch asset ${n} endpoint (${o.status} ${o.statusText})`);
+		let s = await o.json();
+		this.endpoint = {
+			url: s.url,
+			accessToken: s.accessToken
+		};
+	}
+	addTerrain(e = {}) {
+		if (!this.view || !this.endpoint) throw Error("CesiumIonPlugin: addTerrain() must be called after view.init().");
+		let { castShadow: t, receiveShadow: n, show: r, showBoundingBox: i, skirt: a, skirtExaggeration: o, ...s } = e, c = this.view.addSource({
+			type: "quantized-mesh",
+			url: `${this.endpoint.url}{z}/{x}/{y}.terrain`,
+			token: this.endpoint.accessToken,
+			...s
+		}), l = this.view.addLayer({
+			type: "terrain",
+			source: c,
+			terrain: {
+				castShadow: t,
+				receiveShadow: n,
+				show: r,
+				showBoundingBox: i,
+				skirt: a,
+				skirtExaggeration: o
+			}
+		});
+		return l.once("deleted", () => c.delete()), l;
+	}
+}, x = /^3\.\d+\.\d+$/;
+function S(e) {
+	if (typeof e.tilejson != "string" || !x.test(e.tilejson)) throw Error(`TileJsonPlugin: invalid or missing "tilejson" version field (got ${JSON.stringify(e.tilejson)}).`);
+	if (!Array.isArray(e.tiles) || e.tiles.length === 0) throw Error("TileJsonPlugin: \"tiles\" must be a non-empty array of URL templates.");
+}
+var C = class extends t {
+	view;
+	events = new e();
+	credits = [];
+	async init(e, t) {
+		this.view = e;
+	}
+	on(e, t) {
+		this.events.on(e, t);
+	}
+	once(e, t) {
+		this.events.once(e, t);
+	}
+	off(e, t) {
+		this.events.off(e, t);
+	}
+	async addSource(e) {
+		let t = this.view;
+		if (!t) throw Error("TileJsonPlugin: addSource() must be called after view.init().");
+		let n = await this.fetchTileJson(e.url);
+		S(n);
+		let [r, ...i] = n.tiles;
+		i.length > 0 && console.warn(`TileJsonPlugin: TileJSON at ${e.url} lists ${n.tiles.length} mirror tile endpoints; Navara sources use a single URL, so only the first is used.`);
+		let { minzoom: a, maxzoom: o, scheme: s } = n, c = e.id, l = e.type === "raster-tile" ? t.addSource({
+			type: "raster-tile",
+			url: r,
+			...c === void 0 ? {} : { id: c },
+			...a === void 0 ? {} : { minZoom: a },
+			...o === void 0 ? {} : { maxZoom: o },
+			...s === "tms" ? { tms: !0 } : {}
+		}) : t.addSource({
+			type: "vector-tile",
+			url: r,
+			...c === void 0 ? {} : { id: c },
+			...o === void 0 ? {} : { maxZoom: o }
+		});
+		return n.attribution && this.addCredit(n.attribution), this.events.emit("loaded", {
+			source: l,
+			tilejson: n,
+			attribution: n.attribution
+		}), l;
+	}
+	dispose() {
+		let e = this.view?.attribution;
+		e && this.credits.length > 0 && e.remove(this.credits.map((e) => ({ attributionHtml: e }))), this.credits.length = 0, this.events.clear("loaded"), this.view = void 0;
+	}
+	async fetchTileJson(e) {
+		let t = await fetch(e);
+		if (!t.ok) throw Error(`TileJsonPlugin: failed to fetch TileJSON from ${e} (${t.status} ${t.statusText})`);
+		return await t.json();
+	}
+	addCredit(e) {
+		this.credits.includes(e) || (this.credits.push(e), this.view?.attribution?.add([{ attributionHtml: e }]));
+	}
+};
+//#endregion
+export { b as CesiumIonPlugin, v as OverlayPlugin, h as PersonViewPlugin, C as TileJsonPlugin, g as moveOverlayElement };

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("@navaramap/three"),require("three")):typeof define==`function`&&define.amd?define([`exports`,`@navaramap/three`,`three`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.NavaraThreePlugins={},e._navaramap_three,e.three))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=Object.create,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,s=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty,l=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var s=o(t),l=0,u=s.length,d;l<u;l++)d=s[l],!c.call(e,d)&&d!==n&&i(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=a(t,d))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:r(s(e)),l(t||!e||!e.__esModule?i(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1);var u={x:0,y:0,z:0},d={forward:[`KeyW`],backward:[`KeyS`],turnLeft:[`KeyA`],turnRight:[`KeyD`],ascend:[`ArrowUp`,`Space`],descend:[`ArrowDown`,`ControlLeft`,`ControlRight`],dash:[`ShiftLeft`,`ShiftRight`],orbitCamera:[`AltLeft`,`AltRight`],toggleView:[`KeyV`]},f={allowCameraControl:!1,initialView:`tpv`,moveSpeed:50,rotationSpeed:3,altSpeed:30,minAlt:50,maxAlt:5e3,cameraDistance:50,cameraPitch:0,cameraLerpSpeed:3,fpvForwardOffset:0,fpvHeightOffset:1,fpvPitch:0,startLat:35.6812,startLng:139.7671,startHeight:500,startHeading:Math.PI*1.3},p=3,m=1e3,h=class extends t.Plugin{view;config;character;keys;keyToAction;handle=null;modelRef=null;animId=null;lastTime=0;state;listeners=new Set;heldActions=new Set;dashMultiplier=1;orbitKeyHeld=!1;orbitLatched=!1;currentAnimState;modelHeading;cameraHeading;viewMode;movementSuppressed=!1;boundKeyDown;boundKeyUp;_curPos=new n.Vector3;_east=new n.Vector3;_north=new n.Vector3;_worldForward=new n.Vector3;_offset=new n.Vector3;_headingMatrix=new n.Matrix4;_characterFrame=new n.Matrix4;constructor(e={}){super();let{character:t,keys:n,...r}=e;this.config={...f,...r},this.character=t?this.resolveCharacter(t):null,this.keys={...d,...n},this.keyToAction=this.buildKeyMap(this.keys),this.modelHeading=this.config.startHeading,this.cameraHeading=this.config.startHeading,this.viewMode=this.config.initialView,this.currentAnimState=this.character?this.character.animation.idleClip:null,this.boundKeyDown=this.onKeyDown.bind(this),this.boundKeyUp=this.onKeyUp.bind(this)}async init(e,t){this.view=e,this.state={lng:this.config.startLng,lat:this.config.startLat,alt:this.config.startHeight,heading:this.config.startHeading,speed:0,animationState:this.currentAnimState,mode:this.viewMode}}start(){if(!this.view||this.animId!=null)return;this.animId=-1;let{startLat:e,startLng:n,startHeight:r,startHeading:i}=this.config,a=(0,t.geodeticToVector3)({lat:(0,t.degreeToRadian)(e),lng:(0,t.degreeToRadian)(n),height:r});if(this.modelHeading=i,this.cameraHeading=i,this.character){let{animation:e,modelRotationOffset:t,modelScale:n,castShadow:r,receiveShadow:o}=this.character;this.handle=this.view.addMesh({gltfModel:{url:this.character.modelUrl,castShadow:r,receiveShadow:o,animationEnabled:!0,animationAutoPlay:!0,animationActiveClip:e.idleClip,animationSpeed:e.speed,animationLoop:!0,animationCrossfadeDuration:e.crossfadeDuration},matrixWorld:this.composeCharacterFrame(a,i),rotation:{x:t.x,y:t.y,z:t.z},scale:{x:n,y:n,z:n}}),this.modelRef=this.handle.ref,this.modelRef.on(`load`,()=>{this.view&&(this.lastTime=performance.now(),this.animId=requestAnimationFrame(this.tick))})}else this.lastTime=performance.now(),this.animId=requestAnimationFrame(this.tick);this.applyInitialCamera(),this.applyModelVisibility(),document.addEventListener(`keydown`,this.boundKeyDown),document.addEventListener(`keyup`,this.boundKeyUp)}teleport(e){if(!this.view)return;let{lng:n,lat:r,alt:i}=e,a=e.heading==null?this.cameraHeading:e.heading;if(this.handle&&this.character){let e=(0,t.geodeticToVector3)({lat:(0,t.degreeToRadian)(r),lng:(0,t.degreeToRadian)(n),height:i});this.handle.update({matrixWorld:this.composeCharacterFrame(e,a)})}this.modelHeading=a,this.cameraHeading=a,this.placeChaseCamera(r,n,i,a),this.state={lng:n,lat:r,alt:i,heading:a,speed:0,animationState:this.currentAnimState,mode:this.viewMode},this.notify()}getState(){return this.state}onStateChange(e){return this.listeners.add(e),()=>this.listeners.delete(e)}setViewMode(e){this.viewMode!==e&&(this.viewMode=e,this.state={...this.state,mode:e},this.applyModelVisibility(),this.placeChaseCamera(this.state.lat,this.state.lng,this.state.alt,this.cameraHeading),this.notify())}toggleViewMode(){this.setViewMode(this.viewMode===`tpv`?`fpv`:`tpv`)}setAllowCameraControl(e){this.config.allowCameraControl=e}setHeading(e){if(!this.view)return;let{lat:n,lng:r,alt:i}=this.state;if(this.modelHeading=e,this.cameraHeading=e,this.handle&&this.character){let a=(0,t.geodeticToVector3)({lat:(0,t.degreeToRadian)(n),lng:(0,t.degreeToRadian)(r),height:i});this.handle.update({matrixWorld:this.composeCharacterFrame(a,e)})}this.isFreeCamera()||this.placeChaseCamera(n,r,i,e),this.state={...this.state,heading:e},this.notify()}getHeading(){return this.state.heading}setCameraPitch(e){this.config.cameraPitch=e,this.isFreeCamera()||this.placeChaseCamera(this.state.lat,this.state.lng,this.state.alt,this.cameraHeading)}getCameraPitch(){return this.config.cameraPitch}setFpvPitch(e){this.config.fpvPitch=e,this.isFreeCamera()||this.placeChaseCamera(this.state.lat,this.state.lng,this.state.alt,this.cameraHeading)}getFpvPitch(){return this.config.fpvPitch}setFpvHeightOffset(e){this.config.fpvHeightOffset=e,this.isFreeCamera()||this.placeChaseCamera(this.state.lat,this.state.lng,this.state.alt,this.cameraHeading)}getFpvHeightOffset(){return this.config.fpvHeightOffset}dispose(){this.animId!=null&&cancelAnimationFrame(this.animId),this.animId=null,document.removeEventListener(`keydown`,this.boundKeyDown),document.removeEventListener(`keyup`,this.boundKeyUp),this.handle&&=(this.handle.delete(),null),this.modelRef=null,this.heldActions.clear(),this.listeners.clear(),this.orbitKeyHeld=!1,this.orbitLatched=!1,this.dashMultiplier=1,this.view=void 0}resolveCharacter(e){return{modelUrl:e.modelUrl,animation:e.animation,modelRotationOffset:e.modelRotationOffset?{...u,...e.modelRotationOffset}:u,modelScale:e.modelScale??p,hideModelInFpv:e.hideModelInFpv??!0,castShadow:e.castShadow??!1,receiveShadow:e.receiveShadow??!1}}buildKeyMap(e){let t=new Map,n=(e,n)=>{for(let r of e)t.set(r,n)};return n(e.forward,`forward`),n(e.backward,`backward`),n(e.turnLeft,`turnLeft`),n(e.turnRight,`turnRight`),n(e.ascend,`ascend`),n(e.descend,`descend`),n(e.dash,`dash`),n(e.orbitCamera,`orbitCamera`),n(e.toggleView,`toggleView`),t}isFreeCamera(){return this.config.allowCameraControl||this.orbitKeyHeld||this.orbitLatched}isMovementAction(e){return e===`forward`||e===`backward`||e===`turnLeft`||e===`turnRight`||e===`ascend`||e===`descend`}applyModelVisibility(){if(!this.handle||!this.character)return;let e=this.viewMode===`fpv`&&this.character.hideModelInFpv;this.handle.visible=!e}applyInitialCamera(){let{startLat:e,startLng:t,startHeight:n,startHeading:r}=this.config;this.placeChaseCamera(e,t,n,r)}placeChaseCamera(e,t,n,r){if(!this.view)return;let{cameraDistance:i,cameraPitch:a,fpvPitch:o,fpvHeightOffset:s,fpvForwardOffset:c}=this.config,l=this.viewMode===`fpv`,u=n+s;if(l){let n=m,i=c+m,a=Math.tan(o)*n,s=this.advanceLatLng(e,t,r,i);this._offset.set(-Math.sin(r)*n,-Math.cos(r)*n,a),this.view.cameraFollow(!0,{lat:s.lat,lng:s.lng,height:u-a},this._offset);return}let d=i*Math.cos(a),f=i*Math.sin(a);this._offset.set(-Math.sin(r)*d,-Math.cos(r)*d,f),this.view.cameraFollow(!0,{lat:e,lng:t,height:u},this._offset)}composeCharacterFrame(e,n){let r=(0,t.eastNorthUpToFixedFrame)(e);return this._headingMatrix.makeRotationZ(-n),this._characterFrame.multiplyMatrices(r,this._headingMatrix)}advanceLatLng(e,n,r,i){let a=(0,t.geodeticToVector3)({lat:(0,t.degreeToRadian)(e),lng:(0,t.degreeToRadian)(n),height:0}),o=(0,t.eastNorthUpToFixedFrame)(a);this._east.setFromMatrixColumn(o,0).normalize(),this._north.setFromMatrixColumn(o,1).normalize(),this._worldForward.copy(this._east).multiplyScalar(Math.sin(r)).addScaledVector(this._north,Math.cos(r)),a.addScaledVector(this._worldForward,i);let s=(0,t.vector3ToGeodetic)(a);return{lat:(0,t.radianToDegree)(s.lat),lng:(0,t.radianToDegree)(s.lng)}}notify(){for(let e of this.listeners)e(this.state)}onKeyDown(e){let t=e.target;if(t.tagName===`INPUT`||t.tagName===`TEXTAREA`||t.isContentEditable)return;let n=this.keyToAction.get(e.code);if(n!==void 0){if(n===`toggleView`){if(e.repeat)return;this.toggleViewMode();return}if(n===`orbitCamera`){this.orbitKeyHeld=!0,this.orbitLatched=!0;return}if(!this.movementSuppressed){if(n===`dash`){this.dashMultiplier=2.5;return}this.isMovementAction(n)&&(this.orbitLatched=!1),this.heldActions.add(n)}}}onKeyUp(e){let t=this.keyToAction.get(e.code);if(t!==void 0&&t!==`toggleView`){if(t===`orbitCamera`){this.orbitKeyHeld=!1;return}if(t===`dash`){this.dashMultiplier=1;return}this.heldActions.delete(t)}}tick=e=>{if(!this.view)return;this.animId=requestAnimationFrame(this.tick);let n=Math.min((e-this.lastTime)/1e3,.1);this.lastTime=e;let r=0,i=0,a=0;this.heldActions.has(`forward`)&&(i+=1),this.heldActions.has(`backward`)&&--i,this.heldActions.has(`turnLeft`)&&--r,this.heldActions.has(`turnRight`)&&(r+=1),this.heldActions.has(`ascend`)&&(a+=1),this.heldActions.has(`descend`)&&--a;let{moveSpeed:o,rotationSpeed:s,altSpeed:c,minAlt:l,maxAlt:u,cameraLerpSpeed:d}=this.config;r!==0&&(this.modelHeading+=(0,t.degreeToRadian)(s*r));let f=this._curPos;if(this.handle&&this.modelRef){let e=this.modelRef.getWorldPosition();if(!e)return;f.copy(e)}else f.copy((0,t.geodeticToVector3)({lat:(0,t.degreeToRadian)(this.state.lat),lng:(0,t.degreeToRadian)(this.state.lng),height:this.state.alt}));let p=(0,t.eastNorthUpToFixedFrame)(f);this._east.setFromMatrixColumn(p,0).normalize(),this._north.setFromMatrixColumn(p,1).normalize();let m=(0,t.vector3ToGeodetic)(f);this._worldForward.copy(this._east).multiplyScalar(Math.sin(this.modelHeading)).addScaledVector(this._north,Math.cos(this.modelHeading)),i!==0&&f.addScaledVector(this._worldForward,o*this.dashMultiplier*n*i);let h=(0,t.vector3ToGeodetic)(f),g=m.height+a*c*n,_=Math.max(l,Math.min(u,g)),v=(0,t.radianToDegree)(h.lat),y=(0,t.radianToDegree)(h.lng),b=_;if(this.handle&&this.character){let e=(0,t.geodeticToVector3)({lat:h.lat,lng:h.lng,height:_});this.handle.update({matrixWorld:this.composeCharacterFrame(e,this.modelHeading)})}let x=this.modelHeading-this.cameraHeading;if(x-=Math.round(x/(Math.PI*2))*(Math.PI*2),this.cameraHeading+=x*Math.min(n*d,1),this.isFreeCamera())if(this.viewMode===`fpv`){let e=this.advanceLatLng(v,y,this.cameraHeading,this.config.fpvForwardOffset);this.view.cameraFreeLook(!0,{lat:e.lat,lng:e.lng,height:b+this.config.fpvHeightOffset})}else this.view.cameraFollow(!0,{lat:v,lng:y,height:b+this.config.fpvHeightOffset});else this.placeChaseCamera(v,y,b,this.cameraHeading);let S=i!==0||r!==0||a!==0,C=S&&this.dashMultiplier>1,w=this.currentAnimState;if(this.character&&this.modelRef){let{animation:e}=this.character,t=e.walkClip??e.idleClip,n;n=C?e.dashClip:S?t:e.idleClip,n!==this.currentAnimState&&(this.modelRef.crossFadeAnimation(this.currentAnimState??``,n,e.crossfadeDuration),this.currentAnimState=n),w=n}let T={lng:y,lat:v,alt:b,heading:this.modelHeading,speed:o*this.dashMultiplier,animationState:w,mode:this.viewMode};this.hasStateChanged(this.state,T)&&(this.state=T,this.notify())};hasStateChanged(e,t){return e.lng!==t.lng||e.lat!==t.lat||e.alt!==t.alt||e.heading!==t.heading||e.speed!==t.speed||e.animationState!==t.animationState||e.mode!==t.mode}};function g(e,t,n){e.style.transform=`translate(${t}px, ${n}px)`,e.style.willChange=`transform`}var _=1e5,v=class extends t.Plugin{view;maxDistance;positions=[];projected=new Map;listeners=new Set;boundHandler;constructor(e){super(),this.maxDistance=e?.maxDistance??_,this.boundHandler=this.handlePreRender.bind(this)}async init(e,t){this.view=e,e.on(`preRender`,this.boundHandler)}setPositions(e){this.positions=e}onUpdate(e){return this.listeners.add(e),()=>this.listeners.delete(e)}dispose(){this.view&&this.view.off(`preRender`,this.boundHandler),this.listeners.clear(),this.positions=[],this.projected.clear()}worldToScreen(e,n,r){if(!this.view)return null;let i=(0,t.geodeticToVector3)({lng:(0,t.degreeToRadian)(e),lat:(0,t.degreeToRadian)(n),height:r}),a=(0,t.convertWorldToScreen)({width:this.view.screenSize.x,height:this.view.screenSize.y,pixelRatio:this.view.pixelRatio},this.view.camera.raw,i);return a?{x:a.x,y:a.y}:null}handlePreRender(){if(!this.view)return;let e=this.view.camera.positionGeographic,n=(0,t.geodeticToVector3)({lng:(0,t.degreeToRadian)(e.lng),lat:(0,t.degreeToRadian)(e.lat),height:e.height}),r=new Map;for(let e of this.positions){let i=(0,t.geodeticToVector3)({lng:(0,t.degreeToRadian)(e.lng),lat:(0,t.degreeToRadian)(e.lat),height:e.alt}),a=n.distanceTo(i);if(a>this.maxDistance)continue;let o=this.worldToScreen(e.lng,e.lat,e.alt);o&&r.set(e.id,{...o,distance:a})}this.projected=r;let i={projected:this.projected};for(let e of this.listeners)e(i)}},y=`https://api.cesium.com/v1/assets`,b=class extends t.Plugin{view;config;endpoint;constructor(e){super(),this.config=e}async init(e,t){this.view=e;let{assetId:n,accessToken:r,endpoint:i=y}=this.config,a=`${i}/${encodeURIComponent(String(n))}/endpoint?access_token=${encodeURIComponent(r)}`,o=await fetch(a);if(!o.ok)throw Error(`CesiumIonPlugin: failed to fetch asset ${n} endpoint (${o.status} ${o.statusText})`);let s=await o.json();this.endpoint={url:s.url,accessToken:s.accessToken}}addTerrain(e={}){if(!this.view||!this.endpoint)throw Error(`CesiumIonPlugin: addTerrain() must be called after view.init().`);let{castShadow:t,receiveShadow:n,show:r,showBoundingBox:i,skirt:a,skirtExaggeration:o,...s}=e,c=this.view.addSource({type:`quantized-mesh`,url:`${this.endpoint.url}{z}/{x}/{y}.terrain`,token:this.endpoint.accessToken,...s}),l=this.view.addLayer({type:`terrain`,source:c,terrain:{castShadow:t,receiveShadow:n,show:r,showBoundingBox:i,skirt:a,skirtExaggeration:o}});return l.once(`deleted`,()=>c.delete()),l}},x=/^3\.\d+\.\d+$/;function S(e){if(typeof e.tilejson!=`string`||!x.test(e.tilejson))throw Error(`TileJsonPlugin: invalid or missing "tilejson" version field (got ${JSON.stringify(e.tilejson)}).`);if(!Array.isArray(e.tiles)||e.tiles.length===0)throw Error(`TileJsonPlugin: "tiles" must be a non-empty array of URL templates.`)}var C=class extends t.Plugin{view;events=new t.EventHandler;credits=[];async init(e,t){this.view=e}on(e,t){this.events.on(e,t)}once(e,t){this.events.once(e,t)}off(e,t){this.events.off(e,t)}async addSource(e){let t=this.view;if(!t)throw Error(`TileJsonPlugin: addSource() must be called after view.init().`);let n=await this.fetchTileJson(e.url);S(n);let[r,...i]=n.tiles;i.length>0&&console.warn(`TileJsonPlugin: TileJSON at ${e.url} lists ${n.tiles.length} mirror tile endpoints; Navara sources use a single URL, so only the first is used.`);let{minzoom:a,maxzoom:o,scheme:s}=n,c=e.id,l=e.type===`raster-tile`?t.addSource({type:`raster-tile`,url:r,...c===void 0?{}:{id:c},...a===void 0?{}:{minZoom:a},...o===void 0?{}:{maxZoom:o},...s===`tms`?{tms:!0}:{}}):t.addSource({type:`vector-tile`,url:r,...c===void 0?{}:{id:c},...o===void 0?{}:{maxZoom:o}});return n.attribution&&this.addCredit(n.attribution),this.events.emit(`loaded`,{source:l,tilejson:n,attribution:n.attribution}),l}dispose(){let e=this.view?.attribution;e&&this.credits.length>0&&e.remove(this.credits.map(e=>({attributionHtml:e}))),this.credits.length=0,this.events.clear(`loaded`),this.view=void 0}async fetchTileJson(e){let t=await fetch(e);if(!t.ok)throw Error(`TileJsonPlugin: failed to fetch TileJSON from ${e} (${t.status} ${t.statusText})`);return await t.json()}addCredit(e){this.credits.includes(e)||(this.credits.push(e),this.view?.attribution?.add([{attributionHtml:e}]))}};e.CesiumIonPlugin=b,e.OverlayPlugin=v,e.PersonViewPlugin=h,e.TileJsonPlugin=C,e.moveOverlayElement=g});

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@navaramap/three-plugins",
+  "type": "module",
+  "version": "0.0.0",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "license": "MIT OR Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reearth/navara.git",
+    "directory": "web/navara_three_plugins"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "three": ">=0.183.0",
+    "@navaramap/three": "0.0.0",
+    "@navaramap/three-default-plugin": "0.0.0"
+  },
+  "devDependencies": {
+    "@types/three": "0.185.1",
+    "three": "0.185.1",
+    "@navaramap/three-default-plugin": "0.0.0",
+    "@navaramap/three": "0.0.0"
+  },
+  "scripts": {
+    "type-check": "tsc && tsc -p tsconfig.node.json",
+    "build": "pnpm type-check && vite build --watch=false",
+    "build:dev": "vite build --mode development",
+    "build:dev:watch": "pnpm build:dev --watch",
+    "test": "vitest --passWithNoTests --watch=false",
+    "lint": "eslint . --fix",
+    "lint:check": "eslint .",
+    "format": "prettier --write --ignore-path ../../.gitignore .",
+    "format:check": "prettier --check --ignore-path ../../.gitignore ."
+  }
+}