From 3476715c68f0aa0e8e4923194f5bf83df21c9684 Mon Sep 17 00:00:00 2001
From: Max Tobias Weber <tobias.weber@wheregroup.com>
Date: Fri, 9 Jan 2026 09:22:01 +0100
Subject: [PATCH 1/7] refactor: streamline MlThreeModelLayer and
 MlThreeSplatLayer props for transform handling

---
 .../MlThreeModelLayer.stories.tsx             |  65 ++--------
 .../MlThreeModelLayer/MlThreeModelLayer.tsx   |  90 +++++++-------
 .../MlThreeSplatLayer.stories.tsx             |  69 ++---------
 .../MlThreeSplatLayer/MlThreeSplatLayer.tsx   |  87 +++++++------
 .../src/components/ThreeObjectControls.tsx    | 115 +++++++-----------
 5 files changed, 145 insertions(+), 281 deletions(-)

diff --git a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.stories.tsx b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.stories.tsx
index c6446386..28c25356 100644
--- a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.stories.tsx
+++ b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.stories.tsx
@@ -5,7 +5,6 @@ import { useMap, TopToolbar, Sidebar } from '@mapcomponents/react-maplibre';
 import ThreejsContextDecorator from '../../decorators/ThreejsContextDecorator';
 import { useThree } from '../ThreeContext';
 import { ThreeObjectControls } from '../ThreeObjectControls';
-import ThreejsUtils from '../../lib/ThreejsUtils';
 import * as THREE from 'three';
 
 const storyoptions = {
@@ -48,16 +47,11 @@ const Lights = () => {
 };
 
 const Template: any = () => {
-	const { worldMatrix } = useThree();
 	const [showLayer, setShowLayer] = useState(true);
 	const [scale, setScale] = useState(1);
 	const [rotation, setRotation] = useState({ x: 90, y: 90, z: 0 });
-	const [useMapCoords, setUseMapCoords] = useState(true);
 	const [mapPosition, setMapPosition] = useState({ lng: 7.097, lat: 50.7355 });
-	const [altitude, setAltitude] = useState(0);
 	const [position, setPosition] = useState({ x: 0, y: 0, z: 0 });
-	const [enableTransformControls, setEnableTransformControls] = useState(false);
-	const [transformMode, setTransformMode] = useState<'translate' | 'rotate' | 'scale'>('translate');
 	const [sidebarOpen, setSidebarOpen] = useState(true);
 
 	const mapHook = useMap({ mapId: 'map_1' });
@@ -68,55 +62,22 @@ const Template: any = () => {
 		mapHook.map?.setCenter([7.097, 50.7355]);
 	}, [mapHook.map]);
 
-	// Center map on position when switching coordinate modes
-	useEffect(() => {
-		if (!mapHook.map) return;
-		if (useMapCoords) {
-			mapHook.map.setCenter([mapPosition.lng, mapPosition.lat]);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [useMapCoords, mapHook.map]);
-
-	const handleTransformChange = (object: THREE.Object3D) => {
-		setRotation({
-			x: (object.rotation.x * 180) / Math.PI,
-			y: (object.rotation.y * 180) / Math.PI,
-			z: (object.rotation.z * 180) / Math.PI,
-		});
-		setScale(object.scale.x);
-
-		if (useMapCoords && worldMatrix) {
-			const [lng, lat, alt] = ThreejsUtils.toMapPosition(worldMatrix, object.position);
-			setMapPosition({ lng, lat });
-			setAltitude(alt);
-		} else {
-			setPosition({ x: object.position.x, y: object.position.y, z: object.position.z });
-		}
-	};
-
 	return (
 		<>
 			<Lights />
 			{showLayer && (
 				<MlThreeModelLayer
 					url="assets/3D/godzilla_simple.glb"
-					rotation={{
-						x: (rotation.x * Math.PI) / 180,
-						y: (rotation.y * Math.PI) / 180,
-						z: (rotation.z * Math.PI) / 180,
+					position={[mapPosition.lng, mapPosition.lat]}
+					transform={{
+						rotation: {
+							x: (rotation.x * Math.PI) / 180,
+							y: (rotation.y * Math.PI) / 180,
+							z: (rotation.z * Math.PI) / 180,
+						},
+						scale: scale,
+						position: position,
 					}}
-					scale={scale}
-					enableTransformControls={enableTransformControls}
-					transformMode={transformMode}
-					onTransformChange={handleTransformChange}
-					{...(useMapCoords
-						? {
-								mapPosition: [mapPosition.lng, mapPosition.lat],
-								altitude: altitude,
-							}
-						: {
-								position: position,
-							})}
 				/>
 			)}
 
@@ -138,18 +99,10 @@ const Template: any = () => {
 					setScale={setScale}
 					rotation={rotation}
 					setRotation={setRotation}
-					useMapCoords={useMapCoords}
-					setUseMapCoords={setUseMapCoords}
 					mapPosition={mapPosition}
 					setMapPosition={setMapPosition}
-					altitude={altitude}
-					setAltitude={setAltitude}
 					position={position}
 					setPosition={setPosition}
-					enableTransformControls={enableTransformControls}
-					setEnableTransformControls={setEnableTransformControls}
-					transformMode={transformMode}
-					setTransformMode={setTransformMode}
 					layerName="Model"
 				/>
 			</Sidebar>
diff --git a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx
index 954509bd..89f336e9 100644
--- a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx
+++ b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx
@@ -5,7 +5,6 @@ import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
 import { LngLatLike } from 'maplibre-gl';
 import { useThree } from '../ThreeContext';
 import ThreejsUtils from '../../lib/ThreejsUtils';
-import MlTransformControls from '../MlTransformControls';
 
 /**
  * Renders obj or gltf 3D Models on the MapLibreMap referenced by props.mapId
@@ -16,14 +15,12 @@ import MlTransformControls from '../MlTransformControls';
 export interface MlThreeModelLayerProps {
 	mapId?: string;
 	url: string;
-	position?: { x: number; y: number; z: number };
-	mapPosition?: LngLatLike;
-	altitude?: number;
-	rotation?: { x: number; y: number; z: number };
-	scale?: { x: number; y: number; z: number } | number;
-	enableTransformControls?: boolean;
-	transformMode?: 'translate' | 'rotate' | 'scale';
-	onTransformChange?: (object: THREE.Object3D) => void;
+	position: LngLatLike;
+	transform?: {
+		rotation?: { x: number; y: number; z: number };
+		scale?: { x: number; y: number; z: number } | number;
+		position?: { x: number; y: number; z: number };
+	};
 	init?: () => void;
 	onDone?: () => void;
 }
@@ -32,13 +29,7 @@ const MlThreeModelLayer = (props: MlThreeModelLayerProps) => {
 	const {
 		url,
 		position,
-		mapPosition,
-		altitude,
-		rotation,
-		scale,
-		enableTransformControls,
-		transformMode,
-		onTransformChange,
+		transform,
 		init,
 		onDone,
 	} = props;
@@ -52,8 +43,8 @@ const MlThreeModelLayer = (props: MlThreeModelLayerProps) => {
 	initRef.current = init;
 	onDoneRef.current = onDone;
 
-	const transformRef = useRef({ position, mapPosition, altitude, rotation, scale });
-	transformRef.current = { position, mapPosition, altitude, rotation, scale };
+	const transformRef = useRef({ position, transform });
+	transformRef.current = { position, transform };
 	const worldMatrixInvRef = useRef(worldMatrixInv);
 	worldMatrixInvRef.current = worldMatrixInv;
 
@@ -67,24 +58,29 @@ const MlThreeModelLayer = (props: MlThreeModelLayerProps) => {
 		const extension = url.split('.').pop()?.toLowerCase();
 
 		const onLoad = (object: THREE.Object3D) => {
-			const { position, mapPosition, altitude, rotation, scale } = transformRef.current;
+			const { position, transform } = transformRef.current;
 			const worldMatrixInv = worldMatrixInvRef.current;
 
-			if (mapPosition && worldMatrixInv) {
-				const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, mapPosition, altitude);
+			if (position && worldMatrixInv) {
+				const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, position, 0);
 				object.position.set(scenePos.x, scenePos.y, scenePos.z);
-			} else if (position) {
-				object.position.set(position.x, position.y, position.z);
+				
+				// Apply local position offset if provided
+				if (transform?.position) {
+					object.position.x += transform.position.x;
+					object.position.y += transform.position.y;
+					object.position.z += transform.position.z;
+				}
 			}
 
-			if (rotation) {
-				object.rotation.set(rotation.x, rotation.y, rotation.z);
+			if (transform?.rotation) {
+				object.rotation.set(transform.rotation.x, transform.rotation.y, transform.rotation.z);
 			}
-			if (scale) {
-				if (typeof scale === 'number') {
-					object.scale.set(scale, scale, scale);
+			if (transform?.scale) {
+				if (typeof transform.scale === 'number') {
+					object.scale.set(transform.scale, transform.scale, transform.scale);
 				} else {
-					object.scale.set(scale.x, scale.y, scale.z);
+					object.scale.set(transform.scale.x, transform.scale.y, transform.scale.z);
 				}
 			}
 
@@ -122,32 +118,32 @@ const MlThreeModelLayer = (props: MlThreeModelLayerProps) => {
 	useEffect(() => {
 		if (!model) return;
 
-		// Handle position: mapPosition takes precedence over position
-		if (mapPosition && worldMatrixInv) {
-			const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, mapPosition, altitude);
+		if (position && worldMatrixInv) {
+			const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, position, 0);
 			model.position.set(scenePos.x, scenePos.y, scenePos.z);
-		} else if (position) {
-			model.position.set(position.x, position.y, position.z);
+			
+			// Apply local position offset if provided
+			if (transform?.position) {
+				model.position.x += transform.position.x;
+				model.position.y += transform.position.y;
+				model.position.z += transform.position.z;
+			}
 		}
 
-		if (rotation) {
-			model.rotation.set(rotation.x, rotation.y, rotation.z);
+		if (transform?.rotation) {
+			model.rotation.set(transform.rotation.x, transform.rotation.y, transform.rotation.z);
 		}
-		if (scale) {
-			if (typeof scale === 'number') {
-				model.scale.set(scale, scale, scale);
+		if (transform?.scale) {
+			if (typeof transform.scale === 'number') {
+				model.scale.set(transform.scale, transform.scale, transform.scale);
 			} else {
-				model.scale.set(scale.x, scale.y, scale.z);
+				model.scale.set(transform.scale.x, transform.scale.y, transform.scale.z);
 			}
 		}
-	}, [model, position, mapPosition, altitude, rotation, scale, worldMatrixInv]);
+		model.updateMatrixWorld(true);
+	}, [model, position, transform, worldMatrixInv]);
 
-	if (enableTransformControls && model) {
-		return (
-			<MlTransformControls target={model} mode={transformMode} onObjectChange={onTransformChange} />
-		);
-	}
 	return null;
 };
 
-export default MlThreeModelLayer;
+export default MlThreeModelLayer;
\ No newline at end of file
diff --git a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.stories.tsx b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.stories.tsx
index c67535e6..da6b69a2 100644
--- a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.stories.tsx
+++ b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.stories.tsx
@@ -6,9 +6,6 @@ import MlThreeSplatLayer from './MlThreeSplatLayer';
 import { useMap, TopToolbar, Sidebar } from '@mapcomponents/react-maplibre';
 import MlThreeJsContextDecorator from '../../decorators/ThreejsContextDecorator';
 import { ThreeObjectControls } from '../ThreeObjectControls';
-import { useThree } from '../ThreeContext';
-import ThreejsUtils from '../../lib/ThreejsUtils';
-import * as THREE from 'three';
 
 const storyoptions = {
 	title: 'MapComponents/MlThreeSplatLayer',
@@ -25,16 +22,11 @@ const storyoptions = {
 export default storyoptions;
 
 const Template: any = () => {
-	const { worldMatrix } = useThree();
 	const [showLayer, setShowLayer] = useState(true);
 	const [scale, setScale] = useState(100);
 	const [rotation, setRotation] = useState({ x: 270, y: 0, z: 5 });
-	const [useMapCoords, setUseMapCoords] = useState(true);
 	const [mapPosition, setMapPosition] = useState({ lng: 7.0968, lat: 50.736 });
-	const [altitude, setAltitude] = useState(30);
-	const [position, setPosition] = useState({ x: 0, y: 0, z: 100 });
-	const [enableTransformControls, setEnableTransformControls] = useState(false);
-	const [transformMode, setTransformMode] = useState<'translate' | 'rotate' | 'scale'>('translate');
+	const [position, setPosition] = useState({ x: 0, y: 0, z: 30 });
 	const [sidebarOpen, setSidebarOpen] = useState(true);
 
 	const mapHook = useMap({ mapId: 'map_1' });
@@ -45,54 +37,21 @@ const Template: any = () => {
 		mapHook.map?.setCenter([7.096614581535903, 50.736500960686556]);
 	}, [mapHook.map]);
 
-	// Center map on position when switching coordinate modes
-	useEffect(() => {
-		if (!mapHook.map) return;
-		if (useMapCoords) {
-			mapHook.map.setCenter([mapPosition.lng, mapPosition.lat]);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [useMapCoords, mapHook.map]);
-
-	const handleTransformChange = (object: THREE.Object3D) => {
-		setRotation({
-			x: (object.rotation.x * 180) / Math.PI,
-			y: (object.rotation.y * 180) / Math.PI,
-			z: (object.rotation.z * 180) / Math.PI,
-		});
-		setScale(object.scale.x);
-
-		if (useMapCoords && worldMatrix) {
-			const [lng, lat, alt] = ThreejsUtils.toMapPosition(worldMatrix, object.position);
-			setMapPosition({ lng, lat });
-			setAltitude(parseFloat(alt.toFixed(2)));
-		} else {
-			setPosition({ x: object.position.x, y: object.position.y, z: object.position.z });
-		}
-	};
-
 	return (
 		<>
 			{showLayer && (
 				<MlThreeSplatLayer
 					url="assets/splats/output.splat"
-					rotation={{
-						x: (rotation.x * Math.PI) / 180,
-						y: (rotation.y * Math.PI) / 180,
-						z: (rotation.z * Math.PI) / 180,
+					position={[mapPosition.lng, mapPosition.lat]}
+					transform={{
+						rotation: {
+							x: (rotation.x * Math.PI) / 180,
+							y: (rotation.y * Math.PI) / 180,
+							z: (rotation.z * Math.PI) / 180,
+						},
+						scale: scale,
+						position: position,
 					}}
-					scale={scale}
-					enableTransformControls={enableTransformControls}
-					transformMode={transformMode}
-					onTransformChange={handleTransformChange}
-					{...(useMapCoords
-						? {
-								mapPosition: [mapPosition.lng, mapPosition.lat],
-								altitude: altitude,
-							}
-						: {
-								position: position,
-							})}
 				/>
 			)}
 
@@ -114,18 +73,10 @@ const Template: any = () => {
 					setScale={setScale}
 					rotation={rotation}
 					setRotation={setRotation}
-					useMapCoords={useMapCoords}
-					setUseMapCoords={setUseMapCoords}
 					mapPosition={mapPosition}
 					setMapPosition={setMapPosition}
-					altitude={altitude}
-					setAltitude={setAltitude}
 					position={position}
 					setPosition={setPosition}
-					enableTransformControls={enableTransformControls}
-					setEnableTransformControls={setEnableTransformControls}
-					transformMode={transformMode}
-					setTransformMode={setTransformMode}
 					layerName="Splat"
 				/>
 				<Typography
diff --git a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx
index 95efe713..40f258fc 100644
--- a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx
+++ b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx
@@ -5,7 +5,6 @@ import { useThree } from '../ThreeContext';
 import { SplatLoader } from '../../lib/splats/loaders/SplatLoader';
 import { PlySplatLoader } from '../../lib/splats/loaders/PlySplatLoader';
 import ThreejsUtils from '../../lib/ThreejsUtils';
-import MlTransformControls from '../MlTransformControls';
 
 /**
  * Renders splat 3D Models on the MapLibreMap referenced by props.mapId
@@ -16,14 +15,12 @@ import MlTransformControls from '../MlTransformControls';
 export interface MlThreeSplatLayerProps {
 	mapId?: string;
 	url: string;
-	position?: { x: number; y: number; z: number };
-	mapPosition?: LngLatLike;
-	altitude?: number;
-	rotation?: { x: number; y: number; z: number };
-	scale?: { x: number; y: number; z: number } | number;
-	enableTransformControls?: boolean;
-	transformMode?: 'translate' | 'rotate' | 'scale';
-	onTransformChange?: (object: THREE.Object3D) => void;
+	position: LngLatLike;
+	transform?: {
+		rotation?: { x: number; y: number; z: number };
+		scale?: { x: number; y: number; z: number } | number;
+		position?: { x: number; y: number; z: number };
+	};
 	init?: () => void;
 	onDone?: () => void;
 }
@@ -32,13 +29,7 @@ const MlThreeSplatLayer = (props: MlThreeSplatLayerProps) => {
 	const {
 		url,
 		position,
-		mapPosition,
-		altitude,
-		rotation,
-		scale,
-		enableTransformControls,
-		transformMode,
-		onTransformChange,
+		transform,
 		init,
 		onDone,
 	} = props;
@@ -52,8 +43,8 @@ const MlThreeSplatLayer = (props: MlThreeSplatLayerProps) => {
 	initRef.current = init;
 	onDoneRef.current = onDone;
 
-	const transformRef = useRef({ position, mapPosition, altitude, rotation, scale });
-	transformRef.current = { position, mapPosition, altitude, rotation, scale };
+	const transformRef = useRef({ position, transform });
+	transformRef.current = { position, transform };
 	const worldMatrixInvRef = useRef(worldMatrixInv);
 	worldMatrixInvRef.current = worldMatrixInv;
 
@@ -67,24 +58,29 @@ const MlThreeSplatLayer = (props: MlThreeSplatLayerProps) => {
 		const extension = url.split('.').pop()?.toLowerCase();
 
 		const onLoad = (object: THREE.Object3D) => {
-			const { position, mapPosition, altitude, rotation, scale } = transformRef.current;
+			const { position, transform } = transformRef.current;
 			const worldMatrixInv = worldMatrixInvRef.current;
 
-			if (mapPosition && worldMatrixInv) {
-				const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, mapPosition, altitude);
+			if (position && worldMatrixInv) {
+				const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, position, 0);
 				object.position.set(scenePos.x, scenePos.y, scenePos.z);
-			} else if (position) {
-				object.position.set(position.x, position.y, position.z);
+				
+				// Apply local position offset if provided
+				if (transform?.position) {
+					object.position.x += transform.position.x;
+					object.position.y += transform.position.y;
+					object.position.z += transform.position.z;
+				}
 			}
 
-			if (rotation) {
-				object.rotation.set(rotation.x, rotation.y, rotation.z);
+			if (transform?.rotation) {
+				object.rotation.set(transform.rotation.x, transform.rotation.y, transform.rotation.z);
 			}
-			if (scale) {
-				if (typeof scale === 'number') {
-					object.scale.set(scale, scale, scale);
+			if (transform?.scale) {
+				if (typeof transform.scale === 'number') {
+					object.scale.set(transform.scale, transform.scale, transform.scale);
 				} else {
-					object.scale.set(scale.x, scale.y, scale.z);
+					object.scale.set(transform.scale.x, transform.scale.y, transform.scale.z);
 				}
 			}
 			object.updateMatrixWorld(true);
@@ -126,32 +122,31 @@ const MlThreeSplatLayer = (props: MlThreeSplatLayerProps) => {
 	useEffect(() => {
 		if (!model) return;
 
-		// Handle position: mapPosition takes precedence over position
-		if (mapPosition && worldMatrixInv) {
-			const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, mapPosition, altitude);
+		if (position && worldMatrixInv) {
+			const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, position, 0);
 			model.position.set(scenePos.x, scenePos.y, scenePos.z);
-		} else if (position) {
-			model.position.set(position.x, position.y, position.z);
+			
+			// Apply local position offset if provided
+			if (transform?.position) {
+				model.position.x += transform.position.x;
+				model.position.y += transform.position.y;
+				model.position.z += transform.position.z;
+			}
 		}
 
-		if (rotation) {
-			model.rotation.set(rotation.x, rotation.y, rotation.z);
+		if (transform?.rotation) {
+			model.rotation.set(transform.rotation.x, transform.rotation.y, transform.rotation.z);
 		}
-		if (scale) {
-			if (typeof scale === 'number') {
-				model.scale.set(scale, scale, scale);
+		if (transform?.scale) {
+			if (typeof transform.scale === 'number') {
+				model.scale.set(transform.scale, transform.scale, transform.scale);
 			} else {
-				model.scale.set(scale.x, scale.y, scale.z);
+				model.scale.set(transform.scale.x, transform.scale.y, transform.scale.z);
 			}
 		}
 		model.updateMatrixWorld(true);
-	}, [model, position, mapPosition, altitude, rotation, scale, worldMatrixInv]);
+	}, [model, position, transform, worldMatrixInv]);
 
-	if (enableTransformControls && model) {
-		return (
-			<MlTransformControls target={model} mode={transformMode} onObjectChange={onTransformChange} />
-		);
-	}
 	return null;
 };
 
diff --git a/packages/three/src/components/ThreeObjectControls.tsx b/packages/three/src/components/ThreeObjectControls.tsx
index aa653e1c..785b9fcd 100644
--- a/packages/three/src/components/ThreeObjectControls.tsx
+++ b/packages/three/src/components/ThreeObjectControls.tsx
@@ -11,12 +11,8 @@ export interface ThreeObjectControlsProps {
 	setScale: (scale: number) => void;
 	rotation: { x: number; y: number; z: number };
 	setRotation: (rotation: { x: number; y: number; z: number }) => void;
-	useMapCoords: boolean;
-	setUseMapCoords: (use: boolean) => void;
 	mapPosition: { lng: number; lat: number };
 	setMapPosition: (position: { lng: number; lat: number }) => void;
-	altitude: number;
-	setAltitude: (altitude: number) => void;
 	position: { x: number; y: number; z: number };
 	setPosition: (position: { x: number; y: number; z: number }) => void;
 	enableTransformControls?: boolean;
@@ -33,12 +29,8 @@ export const ThreeObjectControls = ({
 	setScale,
 	rotation,
 	setRotation,
-	useMapCoords,
-	setUseMapCoords,
 	mapPosition,
 	setMapPosition,
-	altitude,
-	setAltitude,
 	position,
 	setPosition,
 	enableTransformControls,
@@ -58,14 +50,6 @@ export const ThreeObjectControls = ({
 				>
 					{showLayer ? 'Hide' : 'Show'} {layerName}
 				</Button>
-				<Button
-					color="secondary"
-					variant={useMapCoords ? 'contained' : 'outlined'}
-					onClick={() => setUseMapCoords(!useMapCoords)}
-					size="small"
-				>
-					{useMapCoords ? 'Map Coords' : 'Scene Coords'}
-				</Button>
 				{setEnableTransformControls && (
 					<Button
 						color="info"
@@ -135,63 +119,48 @@ export const ThreeObjectControls = ({
 				max={360}
 				valueLabelDisplay="auto"
 			/>
-			{useMapCoords ? (
-				<>
-					<Typography gutterBottom>Longitude: {mapPosition.lng.toFixed(6)}</Typography>
-					<Slider
-						value={mapPosition.lng}
-						onChange={(e, newValue) => setMapPosition({ ...mapPosition, lng: newValue as number })}
-						min={7.09}
-						max={7.11}
-						step={0.0001}
-						valueLabelDisplay="auto"
-					/>
-					<Typography gutterBottom>Latitude: {mapPosition.lat.toFixed(6)}</Typography>
-					<Slider
-						value={mapPosition.lat}
-						onChange={(e, newValue) => setMapPosition({ ...mapPosition, lat: newValue as number })}
-						min={50.73}
-						max={50.74}
-						step={0.0001}
-						valueLabelDisplay="auto"
-					/>
-					<Typography gutterBottom>Altitude: {altitude} m</Typography>
-					<Slider
-						value={altitude}
-						onChange={(e, newValue) => setAltitude(newValue as number)}
-						min={-100}
-						max={500}
-						valueLabelDisplay="auto"
-					/>
-				</>
-			) : (
-				<>
-					<Typography gutterBottom>Position X: {position.x}</Typography>
-					<Slider
-						value={position.x}
-						onChange={(e, newValue) => setPosition({ ...position, x: newValue as number })}
-						min={-100}
-						max={100}
-						valueLabelDisplay="auto"
-					/>
-					<Typography gutterBottom>Position Y: {position.y}</Typography>
-					<Slider
-						value={position.y}
-						onChange={(e, newValue) => setPosition({ ...position, y: newValue as number })}
-						min={-100}
-						max={100}
-						valueLabelDisplay="auto"
-					/>
-					<Typography gutterBottom>Position Z: {position.z}</Typography>
-					<Slider
-						value={position.z}
-						onChange={(e, newValue) => setPosition({ ...position, z: newValue as number })}
-						min={-500}
-						max={100}
-						valueLabelDisplay="auto"
-					/>
-				</>
-			)}
+			<Typography gutterBottom>Longitude: {mapPosition.lng.toFixed(6)}</Typography>
+			<Slider
+				value={mapPosition.lng}
+				onChange={(e, newValue) => setMapPosition({ ...mapPosition, lng: newValue as number })}
+				min={7.09}
+				max={7.11}
+				step={0.0001}
+				valueLabelDisplay="auto"
+			/>
+			<Typography gutterBottom>Latitude: {mapPosition.lat.toFixed(6)}</Typography>
+			<Slider
+				value={mapPosition.lat}
+				onChange={(e, newValue) => setMapPosition({ ...mapPosition, lat: newValue as number })}
+				min={50.73}
+				max={50.74}
+				step={0.0001}
+				valueLabelDisplay="auto"
+			/>
+			<Typography gutterBottom>Position X: {position.x}</Typography>
+			<Slider
+				value={position.x}
+				onChange={(e, newValue) => setPosition({ ...position, x: newValue as number })}
+				min={-100}
+				max={100}
+				valueLabelDisplay="auto"
+			/>
+			<Typography gutterBottom>Position Y: {position.y}</Typography>
+			<Slider
+				value={position.y}
+				onChange={(e, newValue) => setPosition({ ...position, y: newValue as number })}
+				min={-100}
+				max={100}
+				valueLabelDisplay="auto"
+			/>
+			<Typography gutterBottom>Position Z: {position.z}</Typography>
+			<Slider
+				value={position.z}
+				onChange={(e, newValue) => setPosition({ ...position, z: newValue as number })}
+				min={-500}
+				max={100}
+				valueLabelDisplay="auto"
+			/>
 		</Box>
 	);
 };

From 975e30fec3a4d9e628bfd1cc691ce1286080289d Mon Sep 17 00:00:00 2001
From: Max Tobias Weber <tobias.weber@wheregroup.com>
Date: Fri, 9 Jan 2026 12:48:44 +0100
Subject: [PATCH 2/7] refactor MlThreeModelLayer & MlThreeSplatLayer

---
 .../MlThreeModelLayer/MlThreeModelLayer.tsx   | 132 +++-----------
 .../MlThreeSplatLayer/MlThreeSplatLayer.tsx   | 131 +++-----------
 packages/three/src/hooks/useThreeModel.tsx    | 166 ++++++++++++++++++
 3 files changed, 210 insertions(+), 219 deletions(-)
 create mode 100644 packages/three/src/hooks/useThreeModel.tsx

diff --git a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx
index 89f336e9..56b41f28 100644
--- a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx
+++ b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx
@@ -1,10 +1,8 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback } from 'react';
 import * as THREE from 'three';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
-import { LngLatLike } from 'maplibre-gl';
-import { useThree } from '../ThreeContext';
-import ThreejsUtils from '../../lib/ThreejsUtils';
+import { useThreeModel, UseThreeModelProps } from '../../hooks/useThreeModel';
 
 /**
  * Renders obj or gltf 3D Models on the MapLibreMap referenced by props.mapId
@@ -12,18 +10,9 @@ import ThreejsUtils from '../../lib/ThreejsUtils';
  * @component
  */
 
-export interface MlThreeModelLayerProps {
-	mapId?: string;
-	url: string;
-	position: LngLatLike;
-	transform?: {
-		rotation?: { x: number; y: number; z: number };
-		scale?: { x: number; y: number; z: number } | number;
-		position?: { x: number; y: number; z: number };
-	};
-	init?: () => void;
-	onDone?: () => void;
-}
+export type MlThreeModelLayerProps = Omit<UseThreeModelProps, 'loadFn'> & {
+	mapId?: string; // Kept for compatibility but unused
+};
 
 const MlThreeModelLayer = (props: MlThreeModelLayerProps) => {
 	const {
@@ -33,65 +22,19 @@ const MlThreeModelLayer = (props: MlThreeModelLayerProps) => {
 		init,
 		onDone,
 	} = props;
-	const { scene, worldMatrixInv } = useThree();
-	const modelRef = useRef<THREE.Object3D | undefined>(undefined);
-	const [model, setModel] = useState<THREE.Object3D | undefined>(undefined);
-
-	// Use refs for callbacks to avoid re-triggering the effect when they change
-	const initRef = useRef(init);
-	const onDoneRef = useRef(onDone);
-	initRef.current = init;
-	onDoneRef.current = onDone;
-
-	const transformRef = useRef({ position, transform });
-	transformRef.current = { position, transform };
-	const worldMatrixInvRef = useRef(worldMatrixInv);
-	worldMatrixInvRef.current = worldMatrixInv;
 
-	useEffect(() => {
-		if (!scene) return;
-
-		if (typeof initRef.current === 'function') {
-			initRef.current();
+	const loadFn = useCallback((url: string, onLoad: (object: THREE.Object3D) => void) => {
+		// Robust extension extraction
+		let extension = '';
+		try {
+			// Handle absolute and relative URLs
+			const urlObj = new URL(url, window.location.origin);
+			extension = urlObj.pathname.split('.').pop()?.toLowerCase() || '';
+		} catch (e) {
+			// Fallback for simple strings or malformed URLs
+			extension = url.split('.').pop()?.toLowerCase() || '';
 		}
 
-		const extension = url.split('.').pop()?.toLowerCase();
-
-		const onLoad = (object: THREE.Object3D) => {
-			const { position, transform } = transformRef.current;
-			const worldMatrixInv = worldMatrixInvRef.current;
-
-			if (position && worldMatrixInv) {
-				const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, position, 0);
-				object.position.set(scenePos.x, scenePos.y, scenePos.z);
-				
-				// Apply local position offset if provided
-				if (transform?.position) {
-					object.position.x += transform.position.x;
-					object.position.y += transform.position.y;
-					object.position.z += transform.position.z;
-				}
-			}
-
-			if (transform?.rotation) {
-				object.rotation.set(transform.rotation.x, transform.rotation.y, transform.rotation.z);
-			}
-			if (transform?.scale) {
-				if (typeof transform.scale === 'number') {
-					object.scale.set(transform.scale, transform.scale, transform.scale);
-				} else {
-					object.scale.set(transform.scale.x, transform.scale.y, transform.scale.z);
-				}
-			}
-
-			modelRef.current = object;
-			scene.add(object);
-			setModel(object);
-			if (typeof onDoneRef.current === 'function') {
-				onDoneRef.current();
-			}
-		};
-
 		if (extension === 'glb' || extension === 'gltf') {
 			const loader = new GLTFLoader();
 			loader.load(url, (gltf) => {
@@ -105,43 +48,16 @@ const MlThreeModelLayer = (props: MlThreeModelLayerProps) => {
 		} else {
 			console.warn('MlThreeModelLayer: Unsupported file extension', extension);
 		}
+	}, []);
 
-		return () => {
-			if (modelRef.current) {
-				scene.remove(modelRef.current);
-				modelRef.current = undefined;
-				setModel(undefined);
-			}
-		};
-	}, [scene, url]);
-
-	useEffect(() => {
-		if (!model) return;
-
-		if (position && worldMatrixInv) {
-			const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, position, 0);
-			model.position.set(scenePos.x, scenePos.y, scenePos.z);
-			
-			// Apply local position offset if provided
-			if (transform?.position) {
-				model.position.x += transform.position.x;
-				model.position.y += transform.position.y;
-				model.position.z += transform.position.z;
-			}
-		}
-
-		if (transform?.rotation) {
-			model.rotation.set(transform.rotation.x, transform.rotation.y, transform.rotation.z);
-		}
-		if (transform?.scale) {
-			if (typeof transform.scale === 'number') {
-				model.scale.set(transform.scale, transform.scale, transform.scale);
-			} else {
-				model.scale.set(transform.scale.x, transform.scale.y, transform.scale.z);
-			}
-		}
-		model.updateMatrixWorld(true);
-	}, [model, position, transform, worldMatrixInv]);
+	useThreeModel({
+		url,
+		position,
+		transform,
+		init,
+		onDone,
+		loadFn
+	});
 
 	return null;
 };
diff --git a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx
index 40f258fc..554a6efb 100644
--- a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx
+++ b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx
@@ -1,10 +1,8 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback } from 'react';
 import * as THREE from 'three';
-import { LngLatLike } from 'maplibre-gl';
-import { useThree } from '../ThreeContext';
 import { SplatLoader } from '../../lib/splats/loaders/SplatLoader';
 import { PlySplatLoader } from '../../lib/splats/loaders/PlySplatLoader';
-import ThreejsUtils from '../../lib/ThreejsUtils';
+import { useThreeModel, UseThreeModelProps } from '../../hooks/useThreeModel';
 
 /**
  * Renders splat 3D Models on the MapLibreMap referenced by props.mapId
@@ -12,18 +10,9 @@ import ThreejsUtils from '../../lib/ThreejsUtils';
  * @component
  */
 
-export interface MlThreeSplatLayerProps {
+export type MlThreeSplatLayerProps = Omit<UseThreeModelProps, 'loadFn'> & {
 	mapId?: string;
-	url: string;
-	position: LngLatLike;
-	transform?: {
-		rotation?: { x: number; y: number; z: number };
-		scale?: { x: number; y: number; z: number } | number;
-		position?: { x: number; y: number; z: number };
-	};
-	init?: () => void;
-	onDone?: () => void;
-}
+};
 
 const MlThreeSplatLayer = (props: MlThreeSplatLayerProps) => {
 	const {
@@ -33,66 +22,16 @@ const MlThreeSplatLayer = (props: MlThreeSplatLayerProps) => {
 		init,
 		onDone,
 	} = props;
-	const { scene, worldMatrixInv } = useThree();
-	const modelRef = useRef<THREE.Object3D | undefined>(undefined);
-	const [model, setModel] = useState<THREE.Object3D | undefined>(undefined);
-
-	// Use refs for callbacks to avoid re-triggering the effect when they change
-	const initRef = useRef(init);
-	const onDoneRef = useRef(onDone);
-	initRef.current = init;
-	onDoneRef.current = onDone;
-
-	const transformRef = useRef({ position, transform });
-	transformRef.current = { position, transform };
-	const worldMatrixInvRef = useRef(worldMatrixInv);
-	worldMatrixInvRef.current = worldMatrixInv;
 
-	useEffect(() => {
-		if (!scene) return;
-
-		if (typeof initRef.current === 'function') {
-			initRef.current();
+	const loadFn = useCallback((url: string, onLoad: (object: THREE.Object3D) => void) => {
+		let extension = '';
+		try {
+			const urlObj = new URL(url, window.location.origin);
+			extension = urlObj.pathname.split('.').pop()?.toLowerCase() || '';
+		} catch (e) {
+			extension = url.split('.').pop()?.toLowerCase() || '';
 		}
 
-		const extension = url.split('.').pop()?.toLowerCase();
-
-		const onLoad = (object: THREE.Object3D) => {
-			const { position, transform } = transformRef.current;
-			const worldMatrixInv = worldMatrixInvRef.current;
-
-			if (position && worldMatrixInv) {
-				const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, position, 0);
-				object.position.set(scenePos.x, scenePos.y, scenePos.z);
-				
-				// Apply local position offset if provided
-				if (transform?.position) {
-					object.position.x += transform.position.x;
-					object.position.y += transform.position.y;
-					object.position.z += transform.position.z;
-				}
-			}
-
-			if (transform?.rotation) {
-				object.rotation.set(transform.rotation.x, transform.rotation.y, transform.rotation.z);
-			}
-			if (transform?.scale) {
-				if (typeof transform.scale === 'number') {
-					object.scale.set(transform.scale, transform.scale, transform.scale);
-				} else {
-					object.scale.set(transform.scale.x, transform.scale.y, transform.scale.z);
-				}
-			}
-			object.updateMatrixWorld(true);
-
-			modelRef.current = object;
-			scene.add(object);
-			setModel(object);
-			if (typeof onDoneRef.current === 'function') {
-				onDoneRef.current();
-			}
-		};
-
 		if (extension === 'splat') {
 			const loader = new SplatLoader();
 			loader.load(url, (splatMesh) => {
@@ -106,46 +45,16 @@ const MlThreeSplatLayer = (props: MlThreeSplatLayerProps) => {
 		} else {
 			console.warn('MlThreeSplatLayer: Unsupported file extension', extension);
 		}
+	}, []);
 
-		return () => {
-			if (modelRef.current) {
-				scene.remove(modelRef.current);
-				if ('dispose' in modelRef.current && typeof modelRef.current.dispose === 'function') {
-					(modelRef.current as any).dispose();
-				}
-				modelRef.current = undefined;
-				setModel(undefined);
-			}
-		};
-	}, [scene, url]);
-
-	useEffect(() => {
-		if (!model) return;
-
-		if (position && worldMatrixInv) {
-			const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, position, 0);
-			model.position.set(scenePos.x, scenePos.y, scenePos.z);
-			
-			// Apply local position offset if provided
-			if (transform?.position) {
-				model.position.x += transform.position.x;
-				model.position.y += transform.position.y;
-				model.position.z += transform.position.z;
-			}
-		}
-
-		if (transform?.rotation) {
-			model.rotation.set(transform.rotation.x, transform.rotation.y, transform.rotation.z);
-		}
-		if (transform?.scale) {
-			if (typeof transform.scale === 'number') {
-				model.scale.set(transform.scale, transform.scale, transform.scale);
-			} else {
-				model.scale.set(transform.scale.x, transform.scale.y, transform.scale.z);
-			}
-		}
-		model.updateMatrixWorld(true);
-	}, [model, position, transform, worldMatrixInv]);
+	useThreeModel({
+		url,
+		position,
+		transform,
+		init,
+		onDone,
+		loadFn
+	});
 
 	return null;
 };
diff --git a/packages/three/src/hooks/useThreeModel.tsx b/packages/three/src/hooks/useThreeModel.tsx
new file mode 100644
index 00000000..ce9d0cc3
--- /dev/null
+++ b/packages/three/src/hooks/useThreeModel.tsx
@@ -0,0 +1,166 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import * as THREE from 'three';
+import { LngLatLike } from 'maplibre-gl';
+import { useThree } from '../components/ThreeContext';
+import ThreejsUtils from '../lib/ThreejsUtils';
+
+export interface ThreeModelTransform {
+	rotation?: { x: number; y: number; z: number };
+	scale?: { x: number; y: number; z: number } | number;
+	position?: { x: number; y: number; z: number };
+}
+
+export interface UseThreeModelProps {
+	url: string;
+	position: LngLatLike;
+	transform?: ThreeModelTransform;
+	init?: () => void;
+	onDone?: () => void;
+	loadFn: (url: string, onSuccess: (object: THREE.Object3D) => void) => void;
+}
+
+/**
+ * Recursively dispose of Three.js object resources to prevent memory leaks.
+ */
+const disposeObject = (obj: THREE.Object3D): void => {
+	if ((obj as any).geometry) {
+		(obj as any).geometry.dispose();
+	}
+	
+	if ((obj as any).material) {
+		const material = (obj as any).material;
+		if (Array.isArray(material)) {
+			material.forEach((m) => m.dispose());
+		} else {
+			material.dispose();
+		}
+	}
+	
+	if ('dispose' in obj && typeof (obj as any).dispose === 'function') {
+		(obj as any).dispose();
+	}
+};
+
+/**
+ * Hook to manage loading, transforming, and rendering a 3D model in the MapLibre/Three.js context.
+ */
+export const useThreeModel = (props: UseThreeModelProps) => {
+	const { url, position, transform, init, onDone, loadFn } = props;
+	const { scene, worldMatrixInv } = useThree();
+	const [model, setModel] = useState<THREE.Object3D | undefined>(undefined);
+	const modelRef = useRef<THREE.Object3D | undefined>(undefined);
+
+	const initRef = useRef(init);
+	const onDoneRef = useRef(onDone);
+	initRef.current = init;
+	onDoneRef.current = onDone;
+
+	const transformRef = useRef({ position, transform });
+	transformRef.current = { position, transform };
+	const worldMatrixInvRef = useRef(worldMatrixInv);
+	worldMatrixInvRef.current = worldMatrixInv;
+
+	const updateModelTransform = useCallback(
+		(object: THREE.Object3D, currentWorldMatrixInv: THREE.Matrix4 | undefined) => {
+			const { position: currentPosition, transform: currentTransform } = transformRef.current;
+
+			if (currentPosition && currentWorldMatrixInv) {
+				const scenePos = ThreejsUtils.toScenePosition(
+					currentWorldMatrixInv,
+					currentPosition,
+					0
+				);
+				object.position.set(scenePos.x, scenePos.y, scenePos.z);
+
+				if (currentTransform?.position) {
+					object.position.x += currentTransform.position.x;
+					object.position.y += currentTransform.position.y;
+					object.position.z += currentTransform.position.z;
+				}
+			}
+
+			if (currentTransform?.rotation) {
+				object.rotation.set(
+					currentTransform.rotation.x,
+					currentTransform.rotation.y,
+					currentTransform.rotation.z
+				);
+			}
+
+			if (currentTransform?.scale) {
+				if (typeof currentTransform.scale === 'number') {
+					object.scale.set(
+						currentTransform.scale,
+						currentTransform.scale,
+						currentTransform.scale
+					);
+				} else {
+					object.scale.set(
+						currentTransform.scale.x,
+						currentTransform.scale.y,
+						currentTransform.scale.z
+					);
+				}
+			}
+
+			object.updateMatrixWorld(true);
+		},
+		[]
+	);
+
+	const cleanup = useCallback(() => {
+		if (modelRef.current && scene) {
+			scene.remove(modelRef.current);
+			modelRef.current.traverse(disposeObject);
+			disposeObject(modelRef.current);
+			modelRef.current = undefined;
+			setModel(undefined);
+		}
+	}, [scene]);
+
+	useEffect(() => {
+		if (!scene) return;
+
+		if (typeof initRef.current === 'function') {
+			initRef.current();
+		}
+
+		let isCanceled = false;
+
+		const handleLoad = (object: THREE.Object3D) => {
+			if (isCanceled) {
+				object.traverse(disposeObject);
+				disposeObject(object);
+				return;
+			}
+
+			if (modelRef.current) {
+				cleanup();
+			}
+
+			modelRef.current = object;
+			updateModelTransform(object, worldMatrixInvRef.current);
+			scene.add(object);
+			setModel(object);
+
+			if (typeof onDoneRef.current === 'function') {
+				onDoneRef.current();
+			}
+		};
+
+		loadFn(url, handleLoad);
+
+		return () => {
+			isCanceled = true;
+			cleanup();
+		};
+	}, [url, scene, loadFn, cleanup, updateModelTransform]);
+
+	useEffect(() => {
+		if (model) {
+			updateModelTransform(model, worldMatrixInv);
+		}
+	}, [model, position, transform, worldMatrixInv, updateModelTransform]);
+
+	return model;
+};

From fd0baf6202a06491ecbdc58e2fbb71d5b7596246 Mon Sep 17 00:00:00 2001
From: Max Tobias Weber <tobias.weber@wheregroup.com>
Date: Fri, 9 Jan 2026 12:59:48 +0100
Subject: [PATCH 3/7] update MlThreeModelLayer and MlThreeSplatLayer to use
 loaders instead of loadFn

---
 .../MlThreeModelLayer/MlThreeModelLayer.tsx   | 51 ++++++++-----------
 .../MlThreeSplatLayer/MlThreeSplatLayer.tsx   | 42 ++++++---------
 packages/three/src/hooks/useThreeModel.tsx    | 34 +++++++++++--
 3 files changed, 64 insertions(+), 63 deletions(-)

diff --git a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx
index 56b41f28..70a58e6a 100644
--- a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx
+++ b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx
@@ -1,17 +1,16 @@
-import { useCallback } from 'react';
-import * as THREE from 'three';
+import { useMemo } from 'react';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
-import { useThreeModel, UseThreeModelProps } from '../../hooks/useThreeModel';
+import { useThreeModel, UseThreeModelProps, ModelLoader } from '../../hooks/useThreeModel';
 
 /**
- * Renders obj or gltf 3D Models on the MapLibreMap referenced by props.mapId
+ * Renders obj or gltf 3D Models on the MapLibreMap
  *
  * @component
  */
 
-export type MlThreeModelLayerProps = Omit<UseThreeModelProps, 'loadFn'> & {
-	mapId?: string; // Kept for compatibility but unused
+export type MlThreeModelLayerProps = Omit<UseThreeModelProps, 'loaders'> & {
+	mapId?: string;
 };
 
 const MlThreeModelLayer = (props: MlThreeModelLayerProps) => {
@@ -21,34 +20,23 @@ const MlThreeModelLayer = (props: MlThreeModelLayerProps) => {
 		transform,
 		init,
 		onDone,
+		customLoaders,
 	} = props;
 
-	const loadFn = useCallback((url: string, onLoad: (object: THREE.Object3D) => void) => {
-		// Robust extension extraction
-		let extension = '';
-		try {
-			// Handle absolute and relative URLs
-			const urlObj = new URL(url, window.location.origin);
-			extension = urlObj.pathname.split('.').pop()?.toLowerCase() || '';
-		} catch (e) {
-			// Fallback for simple strings or malformed URLs
-			extension = url.split('.').pop()?.toLowerCase() || '';
-		}
-
-		if (extension === 'glb' || extension === 'gltf') {
+	const loaders = useMemo<Record<string, ModelLoader>>(() => ({
+		gltf: (url, onLoad) => {
+			const loader = new GLTFLoader();
+			loader.load(url, (gltf) => onLoad(gltf.scene));
+		},
+		glb: (url, onLoad) => {
 			const loader = new GLTFLoader();
-			loader.load(url, (gltf) => {
-				onLoad(gltf.scene);
-			});
-		} else if (extension === 'obj') {
+			loader.load(url, (gltf) => onLoad(gltf.scene));
+		},
+		obj: (url, onLoad) => {
 			const loader = new OBJLoader();
-			loader.load(url, (obj) => {
-				onLoad(obj);
-			});
-		} else {
-			console.warn('MlThreeModelLayer: Unsupported file extension', extension);
-		}
-	}, []);
+			loader.load(url, (obj) => onLoad(obj));
+		},
+	}), []);
 
 	useThreeModel({
 		url,
@@ -56,7 +44,8 @@ const MlThreeModelLayer = (props: MlThreeModelLayerProps) => {
 		transform,
 		init,
 		onDone,
-		loadFn
+		loaders,
+		customLoaders,
 	});
 
 	return null;
diff --git a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx
index 554a6efb..35f779e2 100644
--- a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx
+++ b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx
@@ -1,16 +1,15 @@
-import { useCallback } from 'react';
-import * as THREE from 'three';
+import { useMemo } from 'react';
 import { SplatLoader } from '../../lib/splats/loaders/SplatLoader';
 import { PlySplatLoader } from '../../lib/splats/loaders/PlySplatLoader';
-import { useThreeModel, UseThreeModelProps } from '../../hooks/useThreeModel';
+import { useThreeModel, UseThreeModelProps, ModelLoader } from '../../hooks/useThreeModel';
 
 /**
- * Renders splat 3D Models on the MapLibreMap referenced by props.mapId
+ * Renders splat 3D Models on the MapLibreMap
  *
  * @component
  */
 
-export type MlThreeSplatLayerProps = Omit<UseThreeModelProps, 'loadFn'> & {
+export type MlThreeSplatLayerProps = Omit<UseThreeModelProps, 'loaders'> & {
 	mapId?: string;
 };
 
@@ -21,31 +20,19 @@ const MlThreeSplatLayer = (props: MlThreeSplatLayerProps) => {
 		transform,
 		init,
 		onDone,
+		customLoaders,
 	} = props;
 
-	const loadFn = useCallback((url: string, onLoad: (object: THREE.Object3D) => void) => {
-		let extension = '';
-		try {
-			const urlObj = new URL(url, window.location.origin);
-			extension = urlObj.pathname.split('.').pop()?.toLowerCase() || '';
-		} catch (e) {
-			extension = url.split('.').pop()?.toLowerCase() || '';
-		}
-
-		if (extension === 'splat') {
+	const loaders = useMemo<Record<string, ModelLoader>>(() => ({
+		splat: (url, onLoad) => {
 			const loader = new SplatLoader();
-			loader.load(url, (splatMesh) => {
-				onLoad(splatMesh);
-			});
-		} else if (extension === 'ply') {
+			loader.load(url, (splatMesh) => onLoad(splatMesh));
+		},
+		ply: (url, onLoad) => {
 			const loader = new PlySplatLoader();
-			loader.load(url, (splatMesh) => {
-				onLoad(splatMesh);
-			});
-		} else {
-			console.warn('MlThreeSplatLayer: Unsupported file extension', extension);
-		}
-	}, []);
+			loader.load(url, (splatMesh) => onLoad(splatMesh));
+		},
+	}), []);
 
 	useThreeModel({
 		url,
@@ -53,7 +40,8 @@ const MlThreeSplatLayer = (props: MlThreeSplatLayerProps) => {
 		transform,
 		init,
 		onDone,
-		loadFn
+		loaders,
+		customLoaders,
 	});
 
 	return null;
diff --git a/packages/three/src/hooks/useThreeModel.tsx b/packages/three/src/hooks/useThreeModel.tsx
index ce9d0cc3..8bd9de07 100644
--- a/packages/three/src/hooks/useThreeModel.tsx
+++ b/packages/three/src/hooks/useThreeModel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
+import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import * as THREE from 'three';
 import { LngLatLike } from 'maplibre-gl';
 import { useThree } from '../components/ThreeContext';
@@ -10,13 +10,16 @@ export interface ThreeModelTransform {
 	position?: { x: number; y: number; z: number };
 }
 
+export type ModelLoader = (url: string, onSuccess: (object: THREE.Object3D) => void) => void;
+
 export interface UseThreeModelProps {
 	url: string;
 	position: LngLatLike;
 	transform?: ThreeModelTransform;
 	init?: () => void;
 	onDone?: () => void;
-	loadFn: (url: string, onSuccess: (object: THREE.Object3D) => void) => void;
+	loaders: Record<string, ModelLoader>;
+	customLoaders?: Record<string, ModelLoader>;
 }
 
 /**
@@ -45,7 +48,7 @@ const disposeObject = (obj: THREE.Object3D): void => {
  * Hook to manage loading, transforming, and rendering a 3D model in the MapLibre/Three.js context.
  */
 export const useThreeModel = (props: UseThreeModelProps) => {
-	const { url, position, transform, init, onDone, loadFn } = props;
+	const { url, position, transform, init, onDone, loaders, customLoaders } = props;
 	const { scene, worldMatrixInv } = useThree();
 	const [model, setModel] = useState<THREE.Object3D | undefined>(undefined);
 	const modelRef = useRef<THREE.Object3D | undefined>(undefined);
@@ -60,6 +63,11 @@ export const useThreeModel = (props: UseThreeModelProps) => {
 	const worldMatrixInvRef = useRef(worldMatrixInv);
 	worldMatrixInvRef.current = worldMatrixInv;
 
+	const allLoaders = useMemo(
+		() => ({ ...loaders, ...customLoaders }),
+		[loaders, customLoaders]
+	);
+
 	const updateModelTransform = useCallback(
 		(object: THREE.Object3D, currentWorldMatrixInv: THREE.Matrix4 | undefined) => {
 			const { position: currentPosition, transform: currentTransform } = transformRef.current;
@@ -125,6 +133,22 @@ export const useThreeModel = (props: UseThreeModelProps) => {
 			initRef.current();
 		}
 
+		let extension = '';
+		try {
+			const urlObj = new URL(url, window.location.origin);
+			extension = urlObj.pathname.split('.').pop()?.toLowerCase() || '';
+		} catch (e) {
+			extension = url.split('.').pop()?.toLowerCase() || '';
+		}
+
+		const loader = allLoaders[extension];
+		if (!loader) {
+			console.warn(
+				`useThreeModel: No loader found for file extension "${extension}". Supported extensions: ${Object.keys(allLoaders).join(', ')}`
+			);
+			return;
+		}
+
 		let isCanceled = false;
 
 		const handleLoad = (object: THREE.Object3D) => {
@@ -148,13 +172,13 @@ export const useThreeModel = (props: UseThreeModelProps) => {
 			}
 		};
 
-		loadFn(url, handleLoad);
+		loader(url, handleLoad);
 
 		return () => {
 			isCanceled = true;
 			cleanup();
 		};
-	}, [url, scene, loadFn, cleanup, updateModelTransform]);
+	}, [url, scene, allLoaders, cleanup, updateModelTransform]);
 
 	useEffect(() => {
 		if (model) {

From 7af150ee7f465822ac83726c9184a06f8e18dfb9 Mon Sep 17 00:00:00 2001
From: Max Tobias Weber <tobias.weber@wheregroup.com>
Date: Fri, 9 Jan 2026 13:49:05 +0100
Subject: [PATCH 4/7] refactor MlThreeGizmo and add an export for it

---
 ...TransformControls.tsx => MlThreeGizmo.tsx} |   8 +-
 .../MlThreeModelLayer.stories.tsx             |  12 +-
 ...Controls.tsx => MlThreeObjectControls.tsx} | 127 +++++++++++++++++-
 .../MlThreeSplatLayer.stories.tsx             |  11 +-
 .../{components => contexts}/ThreeContext.tsx |   0
 .../ThreeProvider.tsx                         |   0
 .../decorators/ThreejsContextDecorator.tsx    |   2 +-
 packages/three/src/hooks/useThreeModel.tsx    |   2 +-
 packages/three/src/index.ts                   |   6 +-
 9 files changed, 152 insertions(+), 16 deletions(-)
 rename packages/three/src/components/{MlTransformControls.tsx => MlThreeGizmo.tsx} (93%)
 rename packages/three/src/components/{ThreeObjectControls.tsx => MlThreeObjectControls.tsx} (55%)
 rename packages/three/src/{components => contexts}/ThreeContext.tsx (100%)
 rename packages/three/src/{components => contexts}/ThreeProvider.tsx (100%)

diff --git a/packages/three/src/components/MlTransformControls.tsx b/packages/three/src/components/MlThreeGizmo.tsx
similarity index 93%
rename from packages/three/src/components/MlTransformControls.tsx
rename to packages/three/src/components/MlThreeGizmo.tsx
index 52ede6c2..214eded0 100644
--- a/packages/three/src/components/MlTransformControls.tsx
+++ b/packages/three/src/components/MlThreeGizmo.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useRef } from 'react';
 import * as THREE from 'three';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
-import { useThree } from './ThreeContext';
+import { useThree } from '../contexts/ThreeContext';
 
-export interface MlTransformControlsProps {
+export interface MlThreeGizmoProps {
 	target?: THREE.Object3D;
 	mode?: 'translate' | 'rotate' | 'scale';
 	enabled?: boolean;
@@ -12,7 +12,7 @@ export interface MlTransformControlsProps {
 	onObjectChange?: (object: THREE.Object3D) => void;
 }
 
-const MlTransformControls = (props: MlTransformControlsProps) => {
+const MlThreeGizmo = (props: MlThreeGizmoProps) => {
 	const { target, mode, enabled, space, size, onObjectChange } = props;
 	const { scene, camera, renderer, map, sceneRoot } = useThree();
 	const controlsRef = useRef<TransformControls | null>(null);
@@ -109,4 +109,4 @@ const MlTransformControls = (props: MlTransformControlsProps) => {
 	return null;
 };
 
-export default MlTransformControls;
+export default MlThreeGizmo;
diff --git a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.stories.tsx b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.stories.tsx
index 28c25356..82280eb1 100644
--- a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.stories.tsx
+++ b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.stories.tsx
@@ -3,8 +3,8 @@ import Button from '@mui/material/Button';
 import MlThreeModelLayer from './MlThreeModelLayer';
 import { useMap, TopToolbar, Sidebar } from '@mapcomponents/react-maplibre';
 import ThreejsContextDecorator from '../../decorators/ThreejsContextDecorator';
-import { useThree } from '../ThreeContext';
-import { ThreeObjectControls } from '../ThreeObjectControls';
+import { useThree } from '../../contexts/ThreeContext';
+import { MlThreeObjectControls } from '../MlThreeObjectControls';
 import * as THREE from 'three';
 
 const storyoptions = {
@@ -53,6 +53,8 @@ const Template: any = () => {
 	const [mapPosition, setMapPosition] = useState({ lng: 7.097, lat: 50.7355 });
 	const [position, setPosition] = useState({ x: 0, y: 0, z: 0 });
 	const [sidebarOpen, setSidebarOpen] = useState(true);
+	const [enableTransformControls, setEnableTransformControls] = useState(false);
+	const [transformMode, setTransformMode] = useState<'translate' | 'rotate' | 'scale'>('translate');
 
 	const mapHook = useMap({ mapId: 'map_1' });
 	useEffect(() => {
@@ -92,7 +94,7 @@ const Template: any = () => {
 				}
 			/>
 			<Sidebar open={sidebarOpen} setOpen={setSidebarOpen} name="3D Model Config">
-				<ThreeObjectControls
+				<MlThreeObjectControls
 					showLayer={showLayer}
 					setShowLayer={setShowLayer}
 					scale={scale}
@@ -104,6 +106,10 @@ const Template: any = () => {
 					position={position}
 					setPosition={setPosition}
 					layerName="Model"
+					enableTransformControls={enableTransformControls}
+					setEnableTransformControls={setEnableTransformControls}
+					transformMode={transformMode}
+					setTransformMode={setTransformMode}
 				/>
 			</Sidebar>
 		</>
diff --git a/packages/three/src/components/ThreeObjectControls.tsx b/packages/three/src/components/MlThreeObjectControls.tsx
similarity index 55%
rename from packages/three/src/components/ThreeObjectControls.tsx
rename to packages/three/src/components/MlThreeObjectControls.tsx
index 785b9fcd..914d8cd3 100644
--- a/packages/three/src/components/ThreeObjectControls.tsx
+++ b/packages/three/src/components/MlThreeObjectControls.tsx
@@ -1,8 +1,14 @@
+import { useRef, useLayoutEffect, useState } from 'react';
 import Button from '@mui/material/Button';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Slider from '@mui/material/Slider';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
+import * as THREE from 'three';
+import { LngLatLike } from 'maplibre-gl';
+import MlThreeGizmo from './MlThreeGizmo';
+import { useThree } from '../contexts/ThreeContext';
+import ThreejsUtils from '../lib/ThreejsUtils';
 
 export interface ThreeObjectControlsProps {
 	showLayer: boolean;
@@ -22,7 +28,7 @@ export interface ThreeObjectControlsProps {
 	layerName?: string;
 }
 
-export const ThreeObjectControls = ({
+export const MlThreeObjectControls = ({
 	showLayer,
 	setShowLayer,
 	scale,
@@ -39,8 +45,124 @@ export const ThreeObjectControls = ({
 	setTransformMode,
 	layerName = 'Layer',
 }: ThreeObjectControlsProps) => {
+	const { scene, worldMatrixInv } = useThree();
+	const dummyMeshRef = useRef<THREE.Mesh | undefined>(undefined);
+	const [dummyMeshReady, setDummyMeshReady] = useState(false);
+
+	// Create and manage dummy mesh for transform controls
+	useLayoutEffect(() => {
+		if (!scene || !worldMatrixInv || !enableTransformControls) {
+			// Clean up dummy mesh when controls are disabled
+			if (dummyMeshRef.current) {
+				scene?.remove(dummyMeshRef.current);
+				dummyMeshRef.current.geometry.dispose();
+				(dummyMeshRef.current.material as THREE.Material).dispose();
+				dummyMeshRef.current = undefined;
+				setDummyMeshReady(false);
+			}
+			return;
+		}
+
+		// Create invisible dummy mesh at the model position
+		const geometry = new THREE.BoxGeometry(1, 1, 1);
+		const material = new THREE.MeshBasicMaterial({ visible: false });
+		const dummyMesh = new THREE.Mesh(geometry, material);
+
+		// Position the dummy mesh
+		const scenePos = ThreejsUtils.toScenePosition(
+			worldMatrixInv,
+			[mapPosition.lng, mapPosition.lat] as LngLatLike,
+			0
+		);
+		dummyMesh.position.set(
+			scenePos.x + position.x,
+			scenePos.y + position.y,
+			scenePos.z + position.z
+		);
+		dummyMesh.rotation.set(
+			(rotation.x * Math.PI) / 180,
+			(rotation.y * Math.PI) / 180,
+			(rotation.z * Math.PI) / 180
+		);
+		dummyMesh.scale.set(scale, scale, scale);
+
+		scene.add(dummyMesh);
+		dummyMeshRef.current = dummyMesh;
+		setDummyMeshReady(true);
+
+		return () => {
+			if (dummyMeshRef.current) {
+				scene.remove(dummyMeshRef.current);
+				dummyMeshRef.current.geometry.dispose();
+				(dummyMeshRef.current.material as THREE.Material).dispose();
+				dummyMeshRef.current = undefined;
+				setDummyMeshReady(false);
+			}
+		};
+	}, [scene, worldMatrixInv, enableTransformControls]);
+
+	// Update dummy mesh position when props change (but only when controls are enabled)
+	useLayoutEffect(() => {
+		if (!dummyMeshRef.current || !worldMatrixInv) return;
+
+		const scenePos = ThreejsUtils.toScenePosition(
+			worldMatrixInv,
+			[mapPosition.lng, mapPosition.lat] as LngLatLike,
+			0
+		);
+		dummyMeshRef.current.position.set(
+			scenePos.x + position.x,
+			scenePos.y + position.y,
+			scenePos.z + position.z
+		);
+		dummyMeshRef.current.rotation.set(
+			(rotation.x * Math.PI) / 180,
+			(rotation.y * Math.PI) / 180,
+			(rotation.z * Math.PI) / 180
+		);
+		dummyMeshRef.current.scale.set(scale, scale, scale);
+		dummyMeshRef.current.updateMatrixWorld(true);
+	}, [position, rotation, scale, mapPosition, worldMatrixInv]);
+
+	const handleObjectChange = (object: THREE.Object3D) => {
+		if (!worldMatrixInv) return;
+
+		// Get the base scene position from map coordinates
+		const scenePos = ThreejsUtils.toScenePosition(
+			worldMatrixInv,
+			[mapPosition.lng, mapPosition.lat] as LngLatLike,
+			0
+		);
+
+		// Calculate the offset position (object position - base scene position)
+		setPosition({
+			x: object.position.x - scenePos.x,
+			y: object.position.y - scenePos.y,
+			z: object.position.z - scenePos.z,
+		});
+
+		// Update rotation (convert from radians to degrees)
+		setRotation({
+			x: (object.rotation.x * 180) / Math.PI,
+			y: (object.rotation.y * 180) / Math.PI,
+			z: (object.rotation.z * 180) / Math.PI,
+		});
+
+		// Update scale (assuming uniform scale)
+		setScale(object.scale.x);
+	};
+
 	return (
-		<Box sx={{ padding: '10px' }}>
+		<>
+			{dummyMeshReady && dummyMeshRef.current && enableTransformControls && (
+				<MlThreeGizmo
+					target={dummyMeshRef.current}
+					mode={transformMode || 'translate'}
+					enabled={enableTransformControls}
+					onObjectChange={handleObjectChange}
+				/>
+			)}
+			<Box sx={{ padding: '10px' }}>
 			<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', marginBottom: 2 }}>
 				<Button
 					color="primary"
@@ -162,5 +284,6 @@ export const ThreeObjectControls = ({
 				valueLabelDisplay="auto"
 			/>
 		</Box>
+		</>
 	);
 };
diff --git a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.stories.tsx b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.stories.tsx
index da6b69a2..b845a73b 100644
--- a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.stories.tsx
+++ b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.stories.tsx
@@ -5,7 +5,7 @@ import Link from '@mui/material/Link';
 import MlThreeSplatLayer from './MlThreeSplatLayer';
 import { useMap, TopToolbar, Sidebar } from '@mapcomponents/react-maplibre';
 import MlThreeJsContextDecorator from '../../decorators/ThreejsContextDecorator';
-import { ThreeObjectControls } from '../ThreeObjectControls';
+import { MlThreeObjectControls } from '../MlThreeObjectControls';
 
 const storyoptions = {
 	title: 'MapComponents/MlThreeSplatLayer',
@@ -28,6 +28,8 @@ const Template: any = () => {
 	const [mapPosition, setMapPosition] = useState({ lng: 7.0968, lat: 50.736 });
 	const [position, setPosition] = useState({ x: 0, y: 0, z: 30 });
 	const [sidebarOpen, setSidebarOpen] = useState(true);
+	const [enableTransformControls, setEnableTransformControls] = useState(false);
+	const [transformMode, setTransformMode] = useState<'translate' | 'rotate' | 'scale'>('translate');
 
 	const mapHook = useMap({ mapId: 'map_1' });
 	useEffect(() => {
@@ -54,7 +56,6 @@ const Template: any = () => {
 					}}
 				/>
 			)}
-
 			<TopToolbar
 				unmovableButtons={
 					<Button
@@ -66,7 +67,7 @@ const Template: any = () => {
 				}
 			/>
 			<Sidebar open={sidebarOpen} setOpen={setSidebarOpen} name="Splat Config">
-				<ThreeObjectControls
+				<MlThreeObjectControls
 					showLayer={showLayer}
 					setShowLayer={setShowLayer}
 					scale={scale}
@@ -78,6 +79,10 @@ const Template: any = () => {
 					position={position}
 					setPosition={setPosition}
 					layerName="Splat"
+					enableTransformControls={enableTransformControls}
+					setEnableTransformControls={setEnableTransformControls}
+					transformMode={transformMode}
+					setTransformMode={setTransformMode}
 				/>
 				<Typography
 					variant="body2"
diff --git a/packages/three/src/components/ThreeContext.tsx b/packages/three/src/contexts/ThreeContext.tsx
similarity index 100%
rename from packages/three/src/components/ThreeContext.tsx
rename to packages/three/src/contexts/ThreeContext.tsx
diff --git a/packages/three/src/components/ThreeProvider.tsx b/packages/three/src/contexts/ThreeProvider.tsx
similarity index 100%
rename from packages/three/src/components/ThreeProvider.tsx
rename to packages/three/src/contexts/ThreeProvider.tsx
diff --git a/packages/three/src/decorators/ThreejsContextDecorator.tsx b/packages/three/src/decorators/ThreejsContextDecorator.tsx
index 126e1005..5a1b998a 100644
--- a/packages/three/src/decorators/ThreejsContextDecorator.tsx
+++ b/packages/three/src/decorators/ThreejsContextDecorator.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { ThreeProvider } from '../components/ThreeProvider';
+import { ThreeProvider } from '../contexts/ThreeProvider';
 import {
 	MapComponentsProvider,
 	MapLibreMap,
diff --git a/packages/three/src/hooks/useThreeModel.tsx b/packages/three/src/hooks/useThreeModel.tsx
index 8bd9de07..834852c6 100644
--- a/packages/three/src/hooks/useThreeModel.tsx
+++ b/packages/three/src/hooks/useThreeModel.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import * as THREE from 'three';
 import { LngLatLike } from 'maplibre-gl';
-import { useThree } from '../components/ThreeContext';
+import { useThree } from '../contexts/ThreeContext';
 import ThreejsUtils from '../lib/ThreejsUtils';
 
 export interface ThreeModelTransform {
diff --git a/packages/three/src/index.ts b/packages/three/src/index.ts
index 05b612ac..9da29fec 100644
--- a/packages/three/src/index.ts
+++ b/packages/three/src/index.ts
@@ -1,7 +1,9 @@
 export * from './lib/ThreejsUtils';
 export * from './lib/ThreejsSceneHelper';
 export * from './lib/ThreejsSceneRenderer';
-export * from './components/ThreeContext';
-export * from './components/ThreeProvider';
+export * from './contexts/ThreeContext';
+export * from './contexts/ThreeProvider';
 export { default as MlThreeModelLayer } from './components/MlThreeModelLayer/MlThreeModelLayer';
 export { default as MlThreeSplatLayer } from './components/MlThreeSplatLayer/MlThreeSplatLayer';
+export { default as MlThreeGizmo } from './components/MlThreeGizmo';
+export { MlThreeObjectControls } from './components/MlThreeObjectControls';

From 56c9e0de655d7291e3b9cc281d82fa033d17531b Mon Sep 17 00:00:00 2001
From: Max Tobias Weber <tobias.weber@wheregroup.com>
Date: Fri, 9 Jan 2026 13:49:42 +0100
Subject: [PATCH 5/7] fix @mapcomponents/three build

---
 packages/three/package.json   | 10 ++++++----
 packages/three/vite.config.ts |  4 ++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/three/package.json b/packages/three/package.json
index 37ae6c4b..dc255e71 100644
--- a/packages/three/package.json
+++ b/packages/three/package.json
@@ -1,12 +1,14 @@
 {
 	"name": "@mapcomponents/three",
 	"version": "1.7.2",
-	"main": "./index.js",
-	"types": "./index.d.ts",
+	"license": "MIT",
+	"main": "dist/index.cjs.js",
+	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
 	"exports": {
 		".": {
-			"import": "./index.mjs",
-			"require": "./index.js"
+			"import": "dist/index.mjs",
+			"require": "dist/index.cjs.js"
 		}
 	},
 	"publishConfig": {
diff --git a/packages/three/vite.config.ts b/packages/three/vite.config.ts
index 9bd3e672..b9da46bd 100644
--- a/packages/three/vite.config.ts
+++ b/packages/three/vite.config.ts
@@ -26,7 +26,7 @@ export default defineConfig(() => ({
 	// Configuration for building your library.
 	// See: https://vitejs.dev/guide/build.html#library-mode
 	build: {
-		outDir: '../../dist/packages/three',
+		outDir: 'dist',
 		emptyOutDir: true,
 		reportCompressedSize: true,
 		commonjsOptions: {
@@ -39,7 +39,7 @@ export default defineConfig(() => ({
 			fileName: 'index',
 			// Change this to the formats you want to support.
 			// Don't forget to update your package.json as well.
-			formats: ['es' as const],
+			formats: ['es' as const, 'cjs' as const],
 		},
 		rollupOptions: {
 			// External packages that should not be bundled into your library.

From cf42c26985719e54dbfa95d46e8d5136f5d42060 Mon Sep 17 00:00:00 2001
From: Max Tobias Weber <tobias.weber@wheregroup.com>
Date: Fri, 9 Jan 2026 14:02:32 +0100
Subject: [PATCH 6/7] fix formatting

---
 .../MlThreeModelLayer/MlThreeModelLayer.tsx   |  42 ++--
 .../src/components/MlThreeObjectControls.tsx  | 226 +++++++++---------
 .../MlThreeSplatLayer/MlThreeSplatLayer.tsx   |  32 ++-
 packages/three/src/hooks/useThreeModel.tsx    |  21 +-
 4 files changed, 151 insertions(+), 170 deletions(-)

diff --git a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx
index 70a58e6a..5d84095c 100644
--- a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx
+++ b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx
@@ -14,29 +14,25 @@ export type MlThreeModelLayerProps = Omit<UseThreeModelProps, 'loaders'> & {
 };
 
 const MlThreeModelLayer = (props: MlThreeModelLayerProps) => {
-	const {
-		url,
-		position,
-		transform,
-		init,
-		onDone,
-		customLoaders,
-	} = props;
+	const { url, position, transform, init, onDone, customLoaders } = props;
 
-	const loaders = useMemo<Record<string, ModelLoader>>(() => ({
-		gltf: (url, onLoad) => {
-			const loader = new GLTFLoader();
-			loader.load(url, (gltf) => onLoad(gltf.scene));
-		},
-		glb: (url, onLoad) => {
-			const loader = new GLTFLoader();
-			loader.load(url, (gltf) => onLoad(gltf.scene));
-		},
-		obj: (url, onLoad) => {
-			const loader = new OBJLoader();
-			loader.load(url, (obj) => onLoad(obj));
-		},
-	}), []);
+	const loaders = useMemo<Record<string, ModelLoader>>(
+		() => ({
+			gltf: (url, onLoad) => {
+				const loader = new GLTFLoader();
+				loader.load(url, (gltf) => onLoad(gltf.scene));
+			},
+			glb: (url, onLoad) => {
+				const loader = new GLTFLoader();
+				loader.load(url, (gltf) => onLoad(gltf.scene));
+			},
+			obj: (url, onLoad) => {
+				const loader = new OBJLoader();
+				loader.load(url, (obj) => onLoad(obj));
+			},
+		}),
+		[]
+	);
 
 	useThreeModel({
 		url,
@@ -51,4 +47,4 @@ const MlThreeModelLayer = (props: MlThreeModelLayerProps) => {
 	return null;
 };
 
-export default MlThreeModelLayer;
\ No newline at end of file
+export default MlThreeModelLayer;
diff --git a/packages/three/src/components/MlThreeObjectControls.tsx b/packages/three/src/components/MlThreeObjectControls.tsx
index 914d8cd3..6327a960 100644
--- a/packages/three/src/components/MlThreeObjectControls.tsx
+++ b/packages/three/src/components/MlThreeObjectControls.tsx
@@ -163,127 +163,127 @@ export const MlThreeObjectControls = ({
 				/>
 			)}
 			<Box sx={{ padding: '10px' }}>
-			<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', marginBottom: 2 }}>
-				<Button
-					color="primary"
-					variant={showLayer ? 'contained' : 'outlined'}
-					onClick={() => setShowLayer(!showLayer)}
-					size="small"
-				>
-					{showLayer ? 'Hide' : 'Show'} {layerName}
-				</Button>
-				{setEnableTransformControls && (
+				<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', marginBottom: 2 }}>
 					<Button
-						color="info"
-						variant={enableTransformControls ? 'contained' : 'outlined'}
-						onClick={() => setEnableTransformControls(!enableTransformControls)}
+						color="primary"
+						variant={showLayer ? 'contained' : 'outlined'}
+						onClick={() => setShowLayer(!showLayer)}
 						size="small"
 					>
-						3D Gizmo
+						{showLayer ? 'Hide' : 'Show'} {layerName}
 					</Button>
-				)}
-			</Box>
-
-			{setTransformMode && enableTransformControls && (
-				<Box sx={{ marginBottom: 2 }}>
-					<ButtonGroup variant="outlined" size="small" fullWidth aria-label="transform mode">
-						<Button
-							variant={transformMode === 'translate' ? 'contained' : 'outlined'}
-							onClick={() => setTransformMode('translate')}
-						>
-							Move
-						</Button>
+					{setEnableTransformControls && (
 						<Button
-							variant={transformMode === 'rotate' ? 'contained' : 'outlined'}
-							onClick={() => setTransformMode('rotate')}
+							color="info"
+							variant={enableTransformControls ? 'contained' : 'outlined'}
+							onClick={() => setEnableTransformControls(!enableTransformControls)}
+							size="small"
 						>
-							Rotate
+							3D Gizmo
 						</Button>
-						<Button
-							variant={transformMode === 'scale' ? 'contained' : 'outlined'}
-							onClick={() => setTransformMode('scale')}
-						>
-							Scale
-						</Button>
-					</ButtonGroup>
+					)}
 				</Box>
-			)}
-			<Typography gutterBottom>Scale: {scale.toFixed(2)}</Typography>
-			<Slider
-				value={scale}
-				onChange={(e, newValue) => setScale(newValue as number)}
-				min={0.01}
-				max={150}
-				step={0.01}
-				valueLabelDisplay="auto"
-			/>
-			<Typography gutterBottom>Rotation X: {rotation.x}°</Typography>
-			<Slider
-				value={rotation.x}
-				onChange={(e, newValue) => setRotation({ ...rotation, x: newValue as number })}
-				min={0}
-				max={360}
-				valueLabelDisplay="auto"
-			/>
-			<Typography gutterBottom>Rotation Y: {rotation.y}°</Typography>
-			<Slider
-				value={rotation.y}
-				onChange={(e, newValue) => setRotation({ ...rotation, y: newValue as number })}
-				min={0}
-				max={360}
-				valueLabelDisplay="auto"
-			/>
-			<Typography gutterBottom>Rotation Z: {rotation.z}°</Typography>
-			<Slider
-				value={rotation.z}
-				onChange={(e, newValue) => setRotation({ ...rotation, z: newValue as number })}
-				min={0}
-				max={360}
-				valueLabelDisplay="auto"
-			/>
-			<Typography gutterBottom>Longitude: {mapPosition.lng.toFixed(6)}</Typography>
-			<Slider
-				value={mapPosition.lng}
-				onChange={(e, newValue) => setMapPosition({ ...mapPosition, lng: newValue as number })}
-				min={7.09}
-				max={7.11}
-				step={0.0001}
-				valueLabelDisplay="auto"
-			/>
-			<Typography gutterBottom>Latitude: {mapPosition.lat.toFixed(6)}</Typography>
-			<Slider
-				value={mapPosition.lat}
-				onChange={(e, newValue) => setMapPosition({ ...mapPosition, lat: newValue as number })}
-				min={50.73}
-				max={50.74}
-				step={0.0001}
-				valueLabelDisplay="auto"
-			/>
-			<Typography gutterBottom>Position X: {position.x}</Typography>
-			<Slider
-				value={position.x}
-				onChange={(e, newValue) => setPosition({ ...position, x: newValue as number })}
-				min={-100}
-				max={100}
-				valueLabelDisplay="auto"
-			/>
-			<Typography gutterBottom>Position Y: {position.y}</Typography>
-			<Slider
-				value={position.y}
-				onChange={(e, newValue) => setPosition({ ...position, y: newValue as number })}
-				min={-100}
-				max={100}
-				valueLabelDisplay="auto"
-			/>
-			<Typography gutterBottom>Position Z: {position.z}</Typography>
-			<Slider
-				value={position.z}
-				onChange={(e, newValue) => setPosition({ ...position, z: newValue as number })}
-				min={-500}
-				max={100}
-				valueLabelDisplay="auto"
-			/>
-		</Box>
+
+				{setTransformMode && enableTransformControls && (
+					<Box sx={{ marginBottom: 2 }}>
+						<ButtonGroup variant="outlined" size="small" fullWidth aria-label="transform mode">
+							<Button
+								variant={transformMode === 'translate' ? 'contained' : 'outlined'}
+								onClick={() => setTransformMode('translate')}
+							>
+								Move
+							</Button>
+							<Button
+								variant={transformMode === 'rotate' ? 'contained' : 'outlined'}
+								onClick={() => setTransformMode('rotate')}
+							>
+								Rotate
+							</Button>
+							<Button
+								variant={transformMode === 'scale' ? 'contained' : 'outlined'}
+								onClick={() => setTransformMode('scale')}
+							>
+								Scale
+							</Button>
+						</ButtonGroup>
+					</Box>
+				)}
+				<Typography gutterBottom>Scale: {scale.toFixed(2)}</Typography>
+				<Slider
+					value={scale}
+					onChange={(e, newValue) => setScale(newValue as number)}
+					min={0.01}
+					max={150}
+					step={0.01}
+					valueLabelDisplay="auto"
+				/>
+				<Typography gutterBottom>Rotation X: {rotation.x}°</Typography>
+				<Slider
+					value={rotation.x}
+					onChange={(e, newValue) => setRotation({ ...rotation, x: newValue as number })}
+					min={0}
+					max={360}
+					valueLabelDisplay="auto"
+				/>
+				<Typography gutterBottom>Rotation Y: {rotation.y}°</Typography>
+				<Slider
+					value={rotation.y}
+					onChange={(e, newValue) => setRotation({ ...rotation, y: newValue as number })}
+					min={0}
+					max={360}
+					valueLabelDisplay="auto"
+				/>
+				<Typography gutterBottom>Rotation Z: {rotation.z}°</Typography>
+				<Slider
+					value={rotation.z}
+					onChange={(e, newValue) => setRotation({ ...rotation, z: newValue as number })}
+					min={0}
+					max={360}
+					valueLabelDisplay="auto"
+				/>
+				<Typography gutterBottom>Longitude: {mapPosition.lng.toFixed(6)}</Typography>
+				<Slider
+					value={mapPosition.lng}
+					onChange={(e, newValue) => setMapPosition({ ...mapPosition, lng: newValue as number })}
+					min={7.09}
+					max={7.11}
+					step={0.0001}
+					valueLabelDisplay="auto"
+				/>
+				<Typography gutterBottom>Latitude: {mapPosition.lat.toFixed(6)}</Typography>
+				<Slider
+					value={mapPosition.lat}
+					onChange={(e, newValue) => setMapPosition({ ...mapPosition, lat: newValue as number })}
+					min={50.73}
+					max={50.74}
+					step={0.0001}
+					valueLabelDisplay="auto"
+				/>
+				<Typography gutterBottom>Position X: {position.x}</Typography>
+				<Slider
+					value={position.x}
+					onChange={(e, newValue) => setPosition({ ...position, x: newValue as number })}
+					min={-100}
+					max={100}
+					valueLabelDisplay="auto"
+				/>
+				<Typography gutterBottom>Position Y: {position.y}</Typography>
+				<Slider
+					value={position.y}
+					onChange={(e, newValue) => setPosition({ ...position, y: newValue as number })}
+					min={-100}
+					max={100}
+					valueLabelDisplay="auto"
+				/>
+				<Typography gutterBottom>Position Z: {position.z}</Typography>
+				<Slider
+					value={position.z}
+					onChange={(e, newValue) => setPosition({ ...position, z: newValue as number })}
+					min={-500}
+					max={100}
+					valueLabelDisplay="auto"
+				/>
+			</Box>
 		</>
 	);
 };
diff --git a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx
index 35f779e2..caf06cb3 100644
--- a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx
+++ b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx
@@ -14,25 +14,21 @@ export type MlThreeSplatLayerProps = Omit<UseThreeModelProps, 'loaders'> & {
 };
 
 const MlThreeSplatLayer = (props: MlThreeSplatLayerProps) => {
-	const {
-		url,
-		position,
-		transform,
-		init,
-		onDone,
-		customLoaders,
-	} = props;
+	const { url, position, transform, init, onDone, customLoaders } = props;
 
-	const loaders = useMemo<Record<string, ModelLoader>>(() => ({
-		splat: (url, onLoad) => {
-			const loader = new SplatLoader();
-			loader.load(url, (splatMesh) => onLoad(splatMesh));
-		},
-		ply: (url, onLoad) => {
-			const loader = new PlySplatLoader();
-			loader.load(url, (splatMesh) => onLoad(splatMesh));
-		},
-	}), []);
+	const loaders = useMemo<Record<string, ModelLoader>>(
+		() => ({
+			splat: (url, onLoad) => {
+				const loader = new SplatLoader();
+				loader.load(url, (splatMesh) => onLoad(splatMesh));
+			},
+			ply: (url, onLoad) => {
+				const loader = new PlySplatLoader();
+				loader.load(url, (splatMesh) => onLoad(splatMesh));
+			},
+		}),
+		[]
+	);
 
 	useThreeModel({
 		url,
diff --git a/packages/three/src/hooks/useThreeModel.tsx b/packages/three/src/hooks/useThreeModel.tsx
index 834852c6..be1e6656 100644
--- a/packages/three/src/hooks/useThreeModel.tsx
+++ b/packages/three/src/hooks/useThreeModel.tsx
@@ -29,7 +29,7 @@ const disposeObject = (obj: THREE.Object3D): void => {
 	if ((obj as any).geometry) {
 		(obj as any).geometry.dispose();
 	}
-	
+
 	if ((obj as any).material) {
 		const material = (obj as any).material;
 		if (Array.isArray(material)) {
@@ -38,7 +38,7 @@ const disposeObject = (obj: THREE.Object3D): void => {
 			material.dispose();
 		}
 	}
-	
+
 	if ('dispose' in obj && typeof (obj as any).dispose === 'function') {
 		(obj as any).dispose();
 	}
@@ -63,21 +63,14 @@ export const useThreeModel = (props: UseThreeModelProps) => {
 	const worldMatrixInvRef = useRef(worldMatrixInv);
 	worldMatrixInvRef.current = worldMatrixInv;
 
-	const allLoaders = useMemo(
-		() => ({ ...loaders, ...customLoaders }),
-		[loaders, customLoaders]
-	);
+	const allLoaders = useMemo(() => ({ ...loaders, ...customLoaders }), [loaders, customLoaders]);
 
 	const updateModelTransform = useCallback(
 		(object: THREE.Object3D, currentWorldMatrixInv: THREE.Matrix4 | undefined) => {
 			const { position: currentPosition, transform: currentTransform } = transformRef.current;
 
 			if (currentPosition && currentWorldMatrixInv) {
-				const scenePos = ThreejsUtils.toScenePosition(
-					currentWorldMatrixInv,
-					currentPosition,
-					0
-				);
+				const scenePos = ThreejsUtils.toScenePosition(currentWorldMatrixInv, currentPosition, 0);
 				object.position.set(scenePos.x, scenePos.y, scenePos.z);
 
 				if (currentTransform?.position) {
@@ -97,11 +90,7 @@ export const useThreeModel = (props: UseThreeModelProps) => {
 
 			if (currentTransform?.scale) {
 				if (typeof currentTransform.scale === 'number') {
-					object.scale.set(
-						currentTransform.scale,
-						currentTransform.scale,
-						currentTransform.scale
-					);
+					object.scale.set(currentTransform.scale, currentTransform.scale, currentTransform.scale);
 				} else {
 					object.scale.set(
 						currentTransform.scale.x,

From 9bbccfee27bbbc77420e29076e694b0f9d6ded89 Mon Sep 17 00:00:00 2001
From: Max Tobias Weber <tobias.weber@wheregroup.com>
Date: Fri, 9 Jan 2026 14:04:28 +0100
Subject: [PATCH 7/7] fix imports for cypress tests

---
 .../components/MlThreeModelLayer/MlThreeModelLayer.cy.tsx    | 5 ++---
 .../components/MlThreeSplatLayer/MlThreeSplatLayer.cy.tsx    | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.cy.tsx b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.cy.tsx
index 6fe9fb52..52e5ab58 100644
--- a/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.cy.tsx
+++ b/packages/three/src/components/MlThreeModelLayer/MlThreeModelLayer.cy.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { MapComponentsProvider, MapLibreMap, useMap } from '@mapcomponents/react-maplibre';
-import { ThreeProvider } from '../ThreeProvider';
+import { ThreeProvider } from '../../contexts/ThreeProvider';
 import MlThreeModelLayer from './MlThreeModelLayer';
 
 const MapExposer = () => {
@@ -20,8 +20,7 @@ const TestComponent = ({ onDone }: { onDone: () => void }) => {
 			<ThreeProvider id="three-provider" mapId="map_1">
 				<MlThreeModelLayer
 					url="assets/3D/godzilla_simple.glb"
-					mapPosition={[13.404954, 52.520008]}
-					scale={10}
+					position={[13.404954, 52.520008]}
 					onDone={onDone}
 				/>
 			</ThreeProvider>
diff --git a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.cy.tsx b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.cy.tsx
index c96cb275..8b1b02c7 100644
--- a/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.cy.tsx
+++ b/packages/three/src/components/MlThreeSplatLayer/MlThreeSplatLayer.cy.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { MapComponentsProvider, MapLibreMap, useMap } from '@mapcomponents/react-maplibre';
-import { ThreeProvider } from '../ThreeProvider';
+import { ThreeProvider } from '../../contexts/ThreeProvider';
 import MlThreeSplatLayer from './MlThreeSplatLayer';
 
 const MapExposer = () => {
@@ -20,8 +20,7 @@ const TestComponent = ({ onDone }: { onDone: () => void }) => {
 			<ThreeProvider id="three-provider" mapId="map_1">
 				<MlThreeSplatLayer
 					url="assets/splats/output.splat"
-					mapPosition={[13.404954, 52.520008]}
-					scale={1}
+					position={[13.404954, 52.520008]}
 					onDone={onDone}
 				/>
 			</ThreeProvider>