@mapcomponents/three 1.7.2 → 1.7.4

package/src/components/MlThreeModelLayer/MlThreeModelLayer.stories.tsx

@@ -3,9 +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 ThreejsUtils from '../../lib/ThreejsUtils';
+import { useThree } from '../../contexts/ThreeContext';
+import { MlThreeObjectControls } from '../MlThreeObjectControls';
 import * as THREE from 'three';
 
 const storyoptions = {
@@ -48,17 +47,14 @@ 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 [sidebarOpen, setSidebarOpen] = useState(true);
 	const [enableTransformControls, setEnableTransformControls] = useState(false);
 	const [transformMode, setTransformMode] = useState<'translate' | 'rotate' | 'scale'>('translate');
-	const [sidebarOpen, setSidebarOpen] = useState(true);
 
 	const mapHook = useMap({ mapId: 'map_1' });
 	useEffect(() => {
@@ -68,55 +64,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,
-							})}
 				/>
 			)}
 
@@ -131,26 +94,22 @@ const Template: any = () => {
 				}
 			/>
 			<Sidebar open={sidebarOpen} setOpen={setSidebarOpen} name="3D Model Config">
-				<ThreeObjectControls
+				<MlThreeObjectControls
 					showLayer={showLayer}
 					setShowLayer={setShowLayer}
 					scale={scale}
 					setScale={setScale}
 					rotation={rotation}
 					setRotation={setRotation}
-					useMapCoords={useMapCoords}
-					setUseMapCoords={setUseMapCoords}
 					mapPosition={mapPosition}
 					setMapPosition={setMapPosition}
-					altitude={altitude}
-					setAltitude={setAltitude}
 					position={position}
 					setPosition={setPosition}
+					layerName="Model"
 					enableTransformControls={enableTransformControls}
 					setEnableTransformControls={setEnableTransformControls}
 					transformMode={transformMode}
 					setTransformMode={setTransformMode}
-					layerName="Model"
 				/>
 			</Sidebar>
 		</>

package/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx

@@ -1,152 +1,49 @@
-import { useEffect, useRef, useState } 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 { LngLatLike } from 'maplibre-gl';
-import { useThree } from '../ThreeContext';
-import ThreejsUtils from '../../lib/ThreejsUtils';
-import MlTransformControls from '../MlTransformControls';
+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 interface MlThreeModelLayerProps {
+export type MlThreeModelLayerProps = Omit<UseThreeModelProps, 'loaders'> & {
 	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;
-	init?: () => void;
-	onDone?: () => void;
-}
+};
 
 const MlThreeModelLayer = (props: MlThreeModelLayerProps) => {
-	const {
+	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));
+			},
+		}),
+		[]
+	);
+
+	useThreeModel({
 		url,
 		position,
-		mapPosition,
-		altitude,
-		rotation,
-		scale,
-		enableTransformControls,
-		transformMode,
-		onTransformChange,
+		transform,
 		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, mapPosition, altitude, rotation, scale });
-	transformRef.current = { position, mapPosition, altitude, rotation, scale };
-	const worldMatrixInvRef = useRef(worldMatrixInv);
-	worldMatrixInvRef.current = worldMatrixInv;
-
-	useEffect(() => {
-		if (!scene) return;
-
-		if (typeof initRef.current === 'function') {
-			initRef.current();
-		}
-
-		const extension = url.split('.').pop()?.toLowerCase();
-
-		const onLoad = (object: THREE.Object3D) => {
-			const { position, mapPosition, altitude, rotation, scale } = transformRef.current;
-			const worldMatrixInv = worldMatrixInvRef.current;
-
-			if (mapPosition && worldMatrixInv) {
-				const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, mapPosition, altitude);
-				object.position.set(scenePos.x, scenePos.y, scenePos.z);
-			} else if (position) {
-				object.position.set(position.x, position.y, position.z);
-			}
-
-			if (rotation) {
-				object.rotation.set(rotation.x, rotation.y, rotation.z);
-			}
-			if (scale) {
-				if (typeof scale === 'number') {
-					object.scale.set(scale, scale, scale);
-				} else {
-					object.scale.set(scale.x, scale.y, 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) => {
-				onLoad(gltf.scene);
-			});
-		} else if (extension === 'obj') {
-			const loader = new OBJLoader();
-			loader.load(url, (obj) => {
-				onLoad(obj);
-			});
-		} 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;
-
-		// Handle position: mapPosition takes precedence over position
-		if (mapPosition && worldMatrixInv) {
-			const scenePos = ThreejsUtils.toScenePosition(worldMatrixInv, mapPosition, altitude);
-			model.position.set(scenePos.x, scenePos.y, scenePos.z);
-		} else if (position) {
-			model.position.set(position.x, position.y, position.z);
-		}
-
-		if (rotation) {
-			model.rotation.set(rotation.x, rotation.y, rotation.z);
-		}
-		if (scale) {
-			if (typeof scale === 'number') {
-				model.scale.set(scale, scale, scale);
-			} else {
-				model.scale.set(scale.x, scale.y, scale.z);
-			}
-		}
-	}, [model, position, mapPosition, altitude, rotation, scale, worldMatrixInv]);
+		loaders,
+		customLoaders,
+	});
 
-	if (enableTransformControls && model) {
-		return (
-			<MlTransformControls target={model} mode={transformMode} onObjectChange={onTransformChange} />
-		);
-	}
 	return null;
 };
 

package/src/components/MlThreeObjectControls.tsx

@@ -0,0 +1,289 @@
+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;
+	setShowLayer: (show: boolean) => void;
+	scale: number;
+	setScale: (scale: number) => void;
+	rotation: { x: number; y: number; z: number };
+	setRotation: (rotation: { x: number; y: number; z: number }) => void;
+	mapPosition: { lng: number; lat: number };
+	setMapPosition: (position: { lng: number; lat: number }) => void;
+	position: { x: number; y: number; z: number };
+	setPosition: (position: { x: number; y: number; z: number }) => void;
+	enableTransformControls?: boolean;
+	setEnableTransformControls?: (enable: boolean) => void;
+	transformMode?: 'translate' | 'rotate' | 'scale';
+	setTransformMode?: (mode: 'translate' | 'rotate' | 'scale') => void;
+	layerName?: string;
+}
+
+export const MlThreeObjectControls = ({
+	showLayer,
+	setShowLayer,
+	scale,
+	setScale,
+	rotation,
+	setRotation,
+	mapPosition,
+	setMapPosition,
+	position,
+	setPosition,
+	enableTransformControls,
+	setEnableTransformControls,
+	transformMode,
+	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 (
+		<>
+			{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"
+						variant={showLayer ? 'contained' : 'outlined'}
+						onClick={() => setShowLayer(!showLayer)}
+						size="small"
+					>
+						{showLayer ? 'Hide' : 'Show'} {layerName}
+					</Button>
+					{setEnableTransformControls && (
+						<Button
+							color="info"
+							variant={enableTransformControls ? 'contained' : 'outlined'}
+							onClick={() => setEnableTransformControls(!enableTransformControls)}
+							size="small"
+						>
+							3D Gizmo
+						</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>
+							<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>
+		</>
+	);
+};

package/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>