@mapcomponents/three 1.7.2 → 1.7.3

package/dist/README.md

@@ -0,0 +1,54 @@
+# @mapcomponents/three
+
+This library provides React components to easily integrate [Three.js](https://threejs.org/) 3D content into [MapLibre GL JS](https://maplibre.org/) maps using [@mapcomponents/react-maplibre](https://github.com/mapcomponents/react-map-components-maplibre).
+
+## Installation
+
+Install the package and its peer dependencies:
+
+```bash
+npm install @mapcomponents/three @mapcomponents/react-maplibre
+```
+
+## Getting Started
+
+To use `@mapcomponents/three`, you need to wrap your 3D layers with the `ThreeProvider` component. This provider initializes the Three.js scene, camera, and renderer, and registers a custom layer within the MapLibre map.
+
+### Basic Usage
+
+Here is a simple example of how to render a 3D model on a map:
+
+```tsx
+import React from 'react';
+import { MapComponentsProvider, MapLibreMap } from '@mapcomponents/react-maplibre';
+import { ThreeProvider, MlThreeModelLayer } from '@mapcomponents/three';
+
+const App = () => {
+  return (
+    <MapComponentsProvider>
+      <ThreeProvider id="three-scene-1">
+        <MapLibreMap
+          options={{
+            style: 'https://demotiles.maplibre.org/style.json',
+            center: [13.404954, 52.520008],
+            zoom: 15,
+            pitch: 60
+          }}
+        />
+      
+        <MlThreeModelLayer
+          url="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Binary/Duck.glb"
+          mapPosition={[13.404954, 52.520008]}
+          scale={10}
+        />
+      </ThreeProvider>
+    </MapComponentsProvider>
+  );
+};
+
+export default App;
+```
+
+## Running unit tests
+
+Run `nx test @mapcomponents/three` to execute the unit tests via [Vitest](https://vitest.dev/).

package/dist/components/MlThreeGizmo.d.ts

@@ -0,0 +1,12 @@
+import * as THREE from 'three';
+export interface MlThreeGizmoProps {
+    target?: THREE.Object3D;
+    mode?: 'translate' | 'rotate' | 'scale';
+    enabled?: boolean;
+    space?: 'world' | 'local';
+    size?: number;
+    onObjectChange?: (object: THREE.Object3D) => void;
+}
+declare const MlThreeGizmo: (props: MlThreeGizmoProps) => null;
+export default MlThreeGizmo;
+//# sourceMappingURL=MlThreeGizmo.d.ts.map

package/dist/components/MlThreeGizmo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MlThreeGizmo.d.ts","sourceRoot":"","sources":["../../src/components/MlThreeGizmo.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,iBAAiB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC;CAClD;AAED,QAAA,MAAM,YAAY,GAAI,OAAO,iBAAiB,SA+F7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/MlThreeModelLayer/MlThreeModelLayer.cy.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MlThreeModelLayer.cy.d.ts.map

package/dist/components/MlThreeModelLayer/MlThreeModelLayer.cy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MlThreeModelLayer.cy.d.ts","sourceRoot":"","sources":["../../../src/components/MlThreeModelLayer/MlThreeModelLayer.cy.tsx"],"names":[],"mappings":""}

package/dist/components/MlThreeModelLayer/MlThreeModelLayer.d.ts

@@ -0,0 +1,12 @@
+import { UseThreeModelProps } from '../../hooks/useThreeModel';
+/**
+ * Renders obj or gltf 3D Models on the MapLibreMap
+ *
+ * @component
+ */
+export type MlThreeModelLayerProps = Omit<UseThreeModelProps, 'loaders'> & {
+    mapId?: string;
+};
+declare const MlThreeModelLayer: (props: MlThreeModelLayerProps) => null;
+export default MlThreeModelLayer;
+//# sourceMappingURL=MlThreeModelLayer.d.ts.map

package/dist/components/MlThreeModelLayer/MlThreeModelLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MlThreeModelLayer.d.ts","sourceRoot":"","sources":["../../../src/components/MlThreeModelLayer/MlThreeModelLayer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,kBAAkB,EAAe,MAAM,2BAA2B,CAAC;AAE3F;;;;GAIG;AAEH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAAG;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,SAgCvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/MlThreeObjectControls.d.ts

@@ -0,0 +1,41 @@
+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 declare const MlThreeObjectControls: ({ showLayer, setShowLayer, scale, setScale, rotation, setRotation, mapPosition, setMapPosition, position, setPosition, enableTransformControls, setEnableTransformControls, transformMode, setTransformMode, layerName, }: ThreeObjectControlsProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MlThreeObjectControls.d.ts.map

package/dist/components/MlThreeObjectControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MlThreeObjectControls.d.ts","sourceRoot":"","sources":["../../src/components/MlThreeObjectControls.tsx"],"names":[],"mappings":"AAYA,MAAM,WAAW,wBAAwB;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,WAAW,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,cAAc,EAAE,CAAC,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,WAAW,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0BAA0B,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,aAAa,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,qBAAqB,GAAI,2NAgBnC,wBAAwB,4CAkP1B,CAAC"}

package/dist/components/MlThreeSplatLayer/MlThreeSplatLayer.cy.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MlThreeSplatLayer.cy.d.ts.map

package/dist/components/MlThreeSplatLayer/MlThreeSplatLayer.cy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MlThreeSplatLayer.cy.d.ts","sourceRoot":"","sources":["../../../src/components/MlThreeSplatLayer/MlThreeSplatLayer.cy.tsx"],"names":[],"mappings":""}

package/dist/components/MlThreeSplatLayer/MlThreeSplatLayer.d.ts

@@ -0,0 +1,12 @@
+import { UseThreeModelProps } from '../../hooks/useThreeModel';
+/**
+ * Renders splat 3D Models on the MapLibreMap
+ *
+ * @component
+ */
+export type MlThreeSplatLayerProps = Omit<UseThreeModelProps, 'loaders'> & {
+    mapId?: string;
+};
+declare const MlThreeSplatLayer: (props: MlThreeSplatLayerProps) => null;
+export default MlThreeSplatLayer;
+//# sourceMappingURL=MlThreeSplatLayer.d.ts.map

package/dist/components/MlThreeSplatLayer/MlThreeSplatLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MlThreeSplatLayer.d.ts","sourceRoot":"","sources":["../../../src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,kBAAkB,EAAe,MAAM,2BAA2B,CAAC;AAE3F;;;;GAIG;AAEH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAAG;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,SA4BvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/contexts/ThreeContext.d.ts

@@ -0,0 +1,15 @@
+import { Scene, PerspectiveCamera, Group, Matrix4 } from 'three';
+import { Map as MapboxMap } from 'maplibre-gl';
+import { default as ThreejsSceneRenderer } from '../lib/ThreejsSceneRenderer';
+export interface ThreeContextType {
+    scene: Scene | undefined;
+    camera: PerspectiveCamera | undefined;
+    renderer: ThreejsSceneRenderer | undefined;
+    map: MapboxMap | undefined;
+    sceneRoot: Group | undefined;
+    worldMatrix: Matrix4 | undefined;
+    worldMatrixInv: Matrix4 | undefined;
+}
+export declare const ThreeContext: import('react').Context<ThreeContextType>;
+export declare const useThree: () => ThreeContextType;
+//# sourceMappingURL=ThreeContext.d.ts.map

package/dist/contexts/ThreeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThreeContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,GAAG,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,oBAAoB,MAAM,6BAA6B,CAAC;AAE/D,MAAM,WAAW,gBAAgB;IAChC,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;IACzB,MAAM,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACtC,QAAQ,EAAE,oBAAoB,GAAG,SAAS,CAAC;IAC3C,GAAG,EAAE,SAAS,GAAG,SAAS,CAAC;IAC3B,SAAS,EAAE,KAAK,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,2CAQvB,CAAC;AAEH,eAAO,MAAM,QAAQ,wBAAiC,CAAC"}

package/dist/contexts/ThreeProvider.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { LngLatLike } from 'maplibre-gl';
+export interface ThreeProviderProps {
+    mapId?: string;
+    id: string;
+    refCenter?: LngLatLike;
+    envTexture?: string;
+    envIntensity?: number;
+    createLight?: boolean;
+    children?: React.ReactNode;
+    /**
+     * Id of an existing layer in the MapLibre instance to help specify the layer order.
+     * The Three.js layer will be rendered visually beneath the layer with the specified id.
+     */
+    beforeId?: string;
+}
+export declare const ThreeProvider: React.FC<ThreeProviderProps>;
+//# sourceMappingURL=ThreeProvider.d.ts.map

package/dist/contexts/ThreeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreeProvider.d.ts","sourceRoot":"","sources":["../../src/contexts/ThreeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,UAAU,EAAwB,MAAM,aAAa,CAAC;AAM/D,MAAM,WAAW,kBAAkB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4HtD,CAAC"}

package/dist/cypress/support/commands.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=commands.d.ts.map

package/dist/cypress/support/commands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands.d.ts","sourceRoot":"","sources":["../../../src/cypress/support/commands.ts"],"names":[],"mappings":""}

package/dist/cypress/support/component.d.ts

@@ -0,0 +1,9 @@
+import { mount } from 'cypress/react';
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            mount: typeof mount;
+        }
+    }
+}
+//# sourceMappingURL=component.d.ts.map

package/dist/cypress/support/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/cypress/support/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,YAAY,CAAC;AAEpB,OAAO,CAAC,MAAM,CAAC;IAEd,UAAU,OAAO,CAAC;QACjB,UAAU,SAAS;YAClB,KAAK,EAAE,OAAO,KAAK,CAAC;SACpB;KACD;CACD"}

package/dist/decorators/ThreejsContextDecorator.d.ts

@@ -0,0 +1,3 @@
+declare const decorators: ((Story: any, context: any) => import("react/jsx-runtime").JSX.Element)[];
+export default decorators;
+//# sourceMappingURL=ThreejsContextDecorator.d.ts.map

package/dist/decorators/ThreejsContextDecorator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreejsContextDecorator.d.ts","sourceRoot":"","sources":["../../src/decorators/ThreejsContextDecorator.tsx"],"names":[],"mappings":"AASA,OAAO,aAAa,CAAC;AAErB,QAAA,MAAM,UAAU,WACP,GAAG,WAAW,GAAG,+CA2BzB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/hooks/useThreeModel.d.ts

@@ -0,0 +1,34 @@
+import { LngLatLike } from 'maplibre-gl';
+import * as THREE from 'three';
+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>;
+}
+/**
+ * Hook to manage loading, transforming, and rendering a 3D model in the MapLibre/Three.js context.
+ */
+export declare const useThreeModel: (props: UseThreeModelProps) => THREE.Object3D<THREE.Object3DEventMap> | undefined;
+//# sourceMappingURL=useThreeModel.d.ts.map

package/dist/hooks/useThreeModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThreeModel.d.ts","sourceRoot":"","sources":["../../src/hooks/useThreeModel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIzC,MAAM,WAAW,mBAAmB;IACnC,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C,KAAK,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC;IACrD,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/C;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,KAAK,IAAI,KAAK,IAAI,CAAC;AAE7F,MAAM,WAAW,kBAAkB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,UAAU,CAAC;IACrB,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;CAC5C;AAwBD;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,uDAiItD,CAAC"}