feat(react-components): let user control 360 icon culling options

react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx

@@ -11,6 +11,10 @@ import {
   useApply360AnnotationStyling
 } from './useApply360AnnotationStyling';
 import { type Matrix4 } from 'three';
+import {
+  DEFAULT_IMAGE360_ICON_COUNT_LIMIT,
+  DEFAULT_IMAGE360_ICON_CULLING_RADIUS
+} from './constants';
 
 type Image360CollectionContainerProps = {
   addImage360CollectionOptions: AddImage360CollectionOptions;
@@ -48,6 +52,7 @@ export function Image360CollectionContainer({
   }, [addImage360CollectionOptions]);
 
   useApply360AnnotationStyling(modelRef.current, styling);
+  useSetIconCulling(modelRef.current, addImage360CollectionOptions.iconCullingOptions);
 
   useEffect(() => {
     if (
@@ -70,6 +75,11 @@ export function Image360CollectionContainer({
           image360Collection.setModelTransformation(transform);
         }
 
+        setCollectionCullingOptions(
+          image360Collection,
+          addImage360CollectionOptions.iconCullingOptions
+        );
+
         modelRef.current = image360Collection;
         onLoad?.(image360Collection);
       })
@@ -115,6 +125,28 @@ export function Image360CollectionContainer({
   }
 }
 
+const useSetIconCulling = (
+  collection?: Image360Collection,
+  cullingParameters?: { radius?: number; iconCountLimit?: number }
+): void => {
+  const radius = cullingParameters?.radius;
+  const iconCountLimit = cullingParameters?.iconCountLimit;
+
+  useEffect(() => {
+    setCollectionCullingOptions(collection, cullingParameters);
+  }, [collection, radius, iconCountLimit]);
+};
+
+function setCollectionCullingOptions(
+  collection?: Image360Collection,
+  cullingParameters?: { radius?: number; iconCountLimit?: number }
+): void {
+  collection?.set360IconCullingRestrictions(
+    cullingParameters?.radius ?? DEFAULT_IMAGE360_ICON_CULLING_RADIUS,
+    cullingParameters?.iconCountLimit ?? DEFAULT_IMAGE360_ICON_COUNT_LIMIT
+  );
+}
+
 function defaultLoadErrorHandler(addOptions: AddImage360CollectionOptions, error: any): void {
   console.warn(
     `Failed to load image collection ${

react-components/src/components/Image360CollectionContainer/constants.ts

@@ -0,0 +1,5 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+export const DEFAULT_IMAGE360_ICON_CULLING_RADIUS = Infinity;
+export const DEFAULT_IMAGE360_ICON_COUNT_LIMIT = 50;

react-components/src/components/Reveal3DResources/Reveal3DResources.tsx

@@ -37,7 +37,8 @@ export const Reveal3DResources = ({
   defaultResourceStyling,
   instanceStyling,
   onResourcesAdded,
-  onResourceLoadError
+  onResourceLoadError,
+  image360Settings
 }: Reveal3DResourcesProps): ReactElement => {
   const viewer = useReveal();
   const [reveal3DModels, setReveal3DModels] = useState<TypedReveal3DModel[]>([]);
@@ -48,10 +49,11 @@ export const Reveal3DResources = ({
     void getTypedModels(resources, viewer, onResourceLoadError).then(setReveal3DModels);
   }, [resources, viewer]);
 
-  const image360CollectionAddOptions = useMemo(
-    () => resources.filter(is360ImageAddOptions),
-    [resources]
-  );
+  const image360CollectionAddOptions = useMemo(() => {
+    return resources
+      .filter(is360ImageAddOptions)
+      .map((options) => ({ ...image360Settings, ...options }));
+  }, [resources, image360Settings]);
 
   useRemoveNonReferencedModels(reveal3DModels, image360CollectionAddOptions, viewer);
 

react-components/src/components/Reveal3DResources/types.ts

@@ -18,8 +18,13 @@ export type AddImage360CollectionOptions =
 
 export type CommonImage360CollectionAddOptions = {
   transform?: Matrix4;
+  iconCullingOptions?: { radius?: number; iconCountLimit?: number };
 };
 
+export type AddImageCollection360EventsOptions = {
+  siteId: string;
+} & CommonImage360CollectionAddOptions;
+
 export type AddImage360CollectionEventsOptions = {
   siteId: string;
 } & CommonImage360CollectionAddOptions;
@@ -91,8 +96,16 @@ export type DefaultResourceStyling = {
 
 export type Reveal3DResourcesProps = {
   resources: AddResourceOptions[];
+} & CommonResourceContainerProps;
+
+export type CommonImage360Settings = {
+  iconCullingOptions: { radius?: number; iconCountLimit?: number };
+};
+
+export type CommonResourceContainerProps = {
   defaultResourceStyling?: DefaultResourceStyling;
   instanceStyling?: Array<FdmAssetStylingGroup | AssetStylingGroup | Image360AssetStylingGroup>;
+  image360Settings?: CommonImage360Settings;
   onResourcesAdded?: () => void;
   onResourceLoadError?: (failedResource: AddResourceOptions, error: any) => void;
 };

react-components/src/components/SceneContainer/SceneContainer.tsx

@@ -2,12 +2,7 @@
  * Copyright 2023 Cognite AS
  */
 import { type ReactElement } from 'react';
-import {
-  type Image360AssetStylingGroup,
-  type AssetStylingGroup,
-  type DefaultResourceStyling,
-  type FdmAssetStylingGroup
-} from '../Reveal3DResources/types';
+import { type CommonResourceContainerProps } from '../Reveal3DResources/types';
 import { useReveal3dResourcesFromScene } from '../../hooks/useReveal3dResourcesFromScene';
 import { useGroundPlaneFromScene } from '../../hooks/useGroundPlaneFromScene';
 import { useSkyboxFromScene } from '../../hooks/useSkyboxFromScene';
@@ -16,32 +11,17 @@ import { Reveal3DResources } from '../Reveal3DResources/Reveal3DResources';
 export type SceneContainerProps = {
   sceneExternalId: string;
   sceneSpaceId: string;
-  defaultResourceStyling?: DefaultResourceStyling;
-  instanceStyling?: Array<FdmAssetStylingGroup | AssetStylingGroup | Image360AssetStylingGroup>;
-  onResourcesAdded?: () => void;
-  onResourceLoadError?: (error: any) => void;
-};
+} & CommonResourceContainerProps;
 
 export function SceneContainer({
   sceneExternalId,
   sceneSpaceId,
-  defaultResourceStyling,
-  instanceStyling,
-  onResourcesAdded,
-  onResourceLoadError
+  ...rest
 }: SceneContainerProps): ReactElement {
   const resourceOptions = useReveal3dResourcesFromScene(sceneExternalId, sceneSpaceId);
 
   useGroundPlaneFromScene(sceneExternalId, sceneSpaceId);
   useSkyboxFromScene(sceneExternalId, sceneSpaceId);
 
-  return (
-    <Reveal3DResources
-      resources={resourceOptions}
-      defaultResourceStyling={defaultResourceStyling}
-      instanceStyling={instanceStyling}
-      onResourcesAdded={onResourcesAdded}
-      onResourceLoadError={onResourceLoadError}
-    />
-  );
+  return <Reveal3DResources resources={resourceOptions} {...rest} />;
 }

react-components/src/index.ts

@@ -100,6 +100,7 @@ export {
   type AssetStylingGroup,
   type DefaultResourceStyling,
   type Image360AssetStylingGroup,
+  type CommonImage360Settings,
   type TaggedAddResourceOptions,
   type TaggedAdd3DModelOptions,
   type TaggedAddImage360CollectionOptions,