@mapcomponents/three 1.7.2 → 1.7.3

package/src/components/MlThreeSplatLayer/MlThreeSplatLayer.stories.tsx

@@ -5,10 +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 { useThree } from '../ThreeContext';
-import ThreejsUtils from '../../lib/ThreejsUtils';
-import * as THREE from 'three';
+import { MlThreeObjectControls } from '../MlThreeObjectControls';
 
 const storyoptions = {
 	title: 'MapComponents/MlThreeSplatLayer',
@@ -25,17 +22,14 @@ 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 [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 [sidebarOpen, setSidebarOpen] = useState(true);
 
 	const mapHook = useMap({ mapId: 'map_1' });
 	useEffect(() => {
@@ -45,57 +39,23 @@ 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,
-							})}
 				/>
 			)}
-
 			<TopToolbar
 				unmovableButtons={
 					<Button
@@ -107,26 +67,22 @@ const Template: any = () => {
 				}
 			/>
 			<Sidebar open={sidebarOpen} setOpen={setSidebarOpen} name="Splat 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="Splat"
 					enableTransformControls={enableTransformControls}
 					setEnableTransformControls={setEnableTransformControls}
 					transformMode={transformMode}
 					setTransformMode={setTransformMode}
-					layerName="Splat"
 				/>
 				<Typography
 					variant="body2"

package/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx

@@ -1,157 +1,45 @@
-import { useEffect, useRef, useState } from 'react';
-import * as THREE from 'three';
-import { LngLatLike } from 'maplibre-gl';
-import { useThree } from '../ThreeContext';
+import { useMemo } from 'react';
 import { SplatLoader } from '../../lib/splats/loaders/SplatLoader';
 import { PlySplatLoader } from '../../lib/splats/loaders/PlySplatLoader';
-import ThreejsUtils from '../../lib/ThreejsUtils';
-import MlTransformControls from '../MlTransformControls';
+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 interface MlThreeSplatLayerProps {
+export type MlThreeSplatLayerProps = 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 MlThreeSplatLayer = (props: MlThreeSplatLayerProps) => {
-	const {
+	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));
+			},
+		}),
+		[]
+	);
+
+	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);
-				}
-			}
-			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) => {
-				onLoad(splatMesh);
-			});
-		} else if (extension === 'ply') {
-			const loader = new PlySplatLoader();
-			loader.load(url, (splatMesh) => {
-				onLoad(splatMesh);
-			});
-		} 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;
-
-		// 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.updateMatrixWorld(true);
-	}, [model, position, mapPosition, altitude, rotation, scale, worldMatrixInv]);
+		loaders,
+		customLoaders,
+	});
 
-	if (enableTransformControls && model) {
-		return (
-			<MlTransformControls target={model} mode={transformMode} onObjectChange={onTransformChange} />
-		);
-	}
 	return null;
 };
 

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

package/src/hooks/useThreeModel.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import * as THREE from 'three';
+import { LngLatLike } from 'maplibre-gl';
+import { useThree } from '../contexts/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 type ModelLoader = (url: string, onSuccess: (object: THREE.Object3D) => void) => void;
+
+export interface UseThreeModelProps {
+	url: string;
+	position: LngLatLike;
+	transform?: ThreeModelTransform;
+	init?: () => void;
+	onDone?: () => void;
+	loaders: Record<string, ModelLoader>;
+	customLoaders?: Record<string, ModelLoader>;
+}
+
+/**
+ * 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, loaders, customLoaders } = 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 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);
+				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 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) => {
+			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();
+			}
+		};
+
+		loader(url, handleLoad);
+
+		return () => {
+			isCanceled = true;
+			cleanup();
+		};
+	}, [url, scene, allLoaders, cleanup, updateModelTransform]);
+
+	useEffect(() => {
+		if (model) {
+			updateModelTransform(model, worldMatrixInv);
+		}
+	}, [model, position, transform, worldMatrixInv, updateModelTransform]);
+
+	return model;
+};

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

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