diff --git a/react-components/.eslintrc.cjs b/react-components/.eslintrc.cjs
index 5d1d664f654..626bc37f36e 100644
--- a/react-components/.eslintrc.cjs
+++ b/react-components/.eslintrc.cjs
@@ -19,6 +19,7 @@ module.exports = {
   rules: {
     'react/react-in-jsx-scope': 'off',
     '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+    '@typescript-eslint/no-misused-promises': 'off',
     eqeqeq: ['error', 'always']
   },
   settings: {
diff --git a/react-components/package.json b/react-components/package.json
index 2afb4b393f5..dec7489ca12 100644
--- a/react-components/package.json
+++ b/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
diff --git a/react-components/src/components/CadModelContainer/CadModelContainer.tsx b/react-components/src/components/CadModelContainer/CadModelContainer.tsx
index 0add639357a..45e1fcc06d7 100644
--- a/react-components/src/components/CadModelContainer/CadModelContainer.tsx
+++ b/react-components/src/components/CadModelContainer/CadModelContainer.tsx
@@ -9,7 +9,8 @@ import {
   TreeIndexNodeCollection,
   NodeIdNodeCollection,
   DefaultNodeAppearance,
-  type NodeCollection
+  type NodeCollection,
+  type Cognite3DViewer
 } from '@cognite/reveal';
 import { useReveal } from '../RevealContainer/RevealContext';
 import { Matrix4 } from 'three';
@@ -61,16 +62,16 @@ export function CadModelContainer({
   }, [modelId, revisionId, geometryFilter]);
 
   useEffect(() => {
-    if (model === undefined || transform === undefined) return;
+    if (!modelExists(model, viewer) || transform === undefined) return;
     model.setModelTransformation(transform);
   }, [transform, model]);
 
   useEffect(() => {
-    if (model === undefined || styleGroups === undefined) return;
+    if (!modelExists(model, viewer) || styleGroups === undefined) return;
     const stylingCollections = applyStyling(sdk, model, styleGroups);
 
     return () => {
-      if (model === undefined) return;
+      if (!modelExists(model, viewer)) return;
       void stylingCollections.then((nodeCollections) => {
         nodeCollections.forEach((nodeCollection) => {
           model.unassignStyledNodeCollection(nodeCollection);
@@ -80,12 +81,13 @@ export function CadModelContainer({
   }, [styleGroups, model]);
 
   useEffect(() => {
-    if (model === undefined) return;
+    if (!modelExists(model, viewer)) return;
     model.setDefaultNodeAppearance(defaultStyle);
     return () => {
-      if (model !== undefined) {
-        model.setDefaultNodeAppearance(DefaultNodeAppearance.Default);
+      if (!modelExists(model, viewer)) {
+        return;
       }
+      model.setDefaultNodeAppearance(DefaultNodeAppearance.Default);
     };
   }, [defaultStyle, model]);
 
@@ -123,7 +125,7 @@ export function CadModelContainer({
   }
 
   function removeModel(): void {
-    if (model === undefined || !viewer.models.includes(model)) return;
+    if (!modelExists(model, viewer)) return;
 
     if (cachedViewerRef !== undefined && !cachedViewerRef.isRevealContainerMountedRef.current)
       return;
@@ -153,3 +155,10 @@ async function applyStyling(
   }
   return collections;
 }
+
+function modelExists(
+  model: CogniteCadModel | undefined,
+  viewer: Cognite3DViewer
+): model is CogniteCadModel {
+  return model !== undefined && viewer.models.includes(model);
+}
diff --git a/react-components/src/components/CameraController/CameraController.tsx b/react-components/src/components/CameraController/CameraController.tsx
deleted file mode 100644
index 1b92df1bd4d..00000000000
--- a/react-components/src/components/CameraController/CameraController.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/*!
- * Copyright 2023 Cognite AS
- */
-import { type ReactElement, useEffect, useContext, useRef } from 'react';
-import { useReveal } from '../RevealContainer/RevealContext';
-import { ModelsLoadingStateContext } from '../Reveal3DResources/ModelsLoadingContext';
-import {
-  DefaultCameraManager,
-  type CameraControlsOptions,
-  type CameraState
-} from '@cognite/reveal';
-
-export type CameraControllerProps = {
-  initialFitCamera?: FittingStrategy;
-  cameraControlsOptions?: CameraControlsOptions;
-};
-
-type FittingStrategy =
-  | { to: 'cameraState'; state: CameraState }
-  | { to: 'allModels' }
-  | { to: 'none' };
-
-export function CameraController({
-  initialFitCamera,
-  cameraControlsOptions
-}: CameraControllerProps): ReactElement {
-  const initialCameraSet = useRef(false);
-  const viewer = useReveal();
-  const { modelsAdded } = useContext(ModelsLoadingStateContext);
-
-  const fittingStrategy: Required<FittingStrategy> = initialFitCamera ?? { to: 'allModels' };
-
-  useEffect(() => {
-    if (cameraControlsOptions === undefined) return;
-
-    if (!(viewer.cameraManager instanceof DefaultCameraManager))
-      throw new Error('CameraControlsOptions can be set only on default CameraManager');
-
-    viewer.cameraManager.setCameraControlsOptions(cameraControlsOptions);
-  }, [cameraControlsOptions]);
-
-  useEffect(() => {
-    if (initialCameraSet.current) return;
-    if (fittingStrategy.to === 'none') {
-      initialCameraSet.current = true;
-      return;
-    }
-    if (fittingStrategy.to === 'cameraState') {
-      viewer.cameraManager.setCameraState(fittingStrategy.state);
-      initialCameraSet.current = true;
-      return;
-    }
-    if (fittingStrategy.to === 'allModels' && modelsAdded) {
-      viewer.fitCameraToModels(undefined, undefined, true);
-      initialCameraSet.current = true;
-    }
-  }, [modelsAdded]);
-
-  return <></>;
-}
diff --git a/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx b/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx
index 7a10e872c37..96c9b860a7b 100644
--- a/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx
+++ b/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx
@@ -97,7 +97,7 @@ export function PointCloudContainer({
   }
 
   function cleanStyling(): void {
-    if (model === undefined) return;
+    if (model === undefined || !viewer.models.includes(model)) return;
 
     model.setDefaultPointCloudAppearance(DefaultPointCloudAppearance);
     model.removeAllStyledObjectCollections();
diff --git a/react-components/src/components/Reveal3DResources/ModelsLoadingContext.ts b/react-components/src/components/Reveal3DResources/ModelsLoadingContext.ts
deleted file mode 100644
index 6ee0a25325d..00000000000
--- a/react-components/src/components/Reveal3DResources/ModelsLoadingContext.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/*!
- * Copyright 2023 Cognite AS
- */
-import { createContext } from 'react';
-
-export type ModelsLoadingState = {
-  modelsAdded: boolean;
-  setModelsAdded: (value: boolean) => void;
-};
-export const ModelsLoadingStateContext = createContext<ModelsLoadingState>({
-  modelsAdded: false,
-  setModelsAdded: () => {}
-});
diff --git a/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx b/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
index 88eba782bde..17fe396efb0 100644
--- a/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
+++ b/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
@@ -1,9 +1,8 @@
 /*!
  * Copyright 2023 Cognite AS
  */
-import { useRef, type ReactElement, useContext, useState, useEffect } from 'react';
+import { useRef, type ReactElement, useState, useEffect } from 'react';
 import { type Cognite3DViewer, type PointerEventData } from '@cognite/reveal';
-import { ModelsLoadingStateContext } from './ModelsLoadingContext';
 import { CadModelContainer, type CadModelStyling } from '../CadModelContainer/CadModelContainer';
 import {
   PointCloudContainer,
@@ -27,11 +26,11 @@ export const Reveal3DResources = ({
   resources,
   defaultResourceStyling,
   instanceStyling,
-  onNodeClick
+  onNodeClick,
+  onResourcesAdded
 }: Reveal3DResourcesProps): ReactElement => {
   const [reveal3DModels, setReveal3DModels] = useState<TypedReveal3DModel[]>([]);
 
-  const { setModelsAdded } = useContext(ModelsLoadingStateContext);
   const viewer = useReveal();
   const fdmSdk = useFdmSdk();
   const client = useSDK();
@@ -73,8 +72,8 @@ export const Reveal3DResources = ({
   const onModelLoaded = (): void => {
     numModelsLoaded.current += 1;
 
-    if (numModelsLoaded.current === resources.length) {
-      setModelsAdded(true);
+    if (numModelsLoaded.current === resources.length && onResourcesAdded !== undefined) {
+      onResourcesAdded();
     }
   };
 
diff --git a/react-components/src/components/Reveal3DResources/types.ts b/react-components/src/components/Reveal3DResources/types.ts
index d6c06ff69f0..3ca1b91216e 100644
--- a/react-components/src/components/Reveal3DResources/types.ts
+++ b/react-components/src/components/Reveal3DResources/types.ts
@@ -47,4 +47,5 @@ export type Reveal3DResourcesProps = {
   defaultResourceStyling?: DefaultResourceStyling;
   instanceStyling?: FdmAssetStylingGroup[];
   onNodeClick?: (node: Promise<NodeDataResult | undefined>) => void;
+  onResourcesAdded?: () => void;
 };
diff --git a/react-components/src/components/RevealContainer/RevealContainer.tsx b/react-components/src/components/RevealContainer/RevealContainer.tsx
index bf2401ee122..825214d4308 100644
--- a/react-components/src/components/RevealContainer/RevealContainer.tsx
+++ b/react-components/src/components/RevealContainer/RevealContainer.tsx
@@ -7,7 +7,6 @@ import { createPortal } from 'react-dom';
 import { Cognite3DViewer, type Cognite3DViewerOptions } from '@cognite/reveal';
 import { RevealContext } from './RevealContext';
 import { type Color } from 'three';
-import { ModelsLoadingStateContext } from '../Reveal3DResources/ModelsLoadingContext';
 import { SDKProvider } from './SDKProvider';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { useRevealKeepAlive } from '../RevealKeepAlive/RevealKeepAliveContext';
@@ -78,9 +77,7 @@ export function RevealContainer({
       <>
         <RevealContainerElementContext.Provider value={wrapperDomElement.current}>
           <RevealContext.Provider value={viewer}>
-            <ModelsLoadingProvider>
-              {createPortal(children, viewerDomElement.current)}
-            </ModelsLoadingProvider>
+            {createPortal(children, viewerDomElement.current)}
           </RevealContext.Provider>
         </RevealContainerElementContext.Provider>
       </>
@@ -104,13 +101,3 @@ export function RevealContainer({
     return viewer;
   }
 }
-
-function ModelsLoadingProvider({ children }: { children?: ReactNode }): ReactElement {
-  const [modelsLoading, setModelsLoading] = useState(false);
-  return (
-    <ModelsLoadingStateContext.Provider
-      value={{ modelsAdded: modelsLoading, setModelsAdded: setModelsLoading }}>
-      {children}
-    </ModelsLoadingStateContext.Provider>
-  );
-}
diff --git a/react-components/src/components/RevealToolbar/FitModelsButton.tsx b/react-components/src/components/RevealToolbar/FitModelsButton.tsx
index 242b4e2c662..00d3fbf78f7 100644
--- a/react-components/src/components/RevealToolbar/FitModelsButton.tsx
+++ b/react-components/src/components/RevealToolbar/FitModelsButton.tsx
@@ -4,21 +4,15 @@
 
 import { type ReactElement, useCallback } from 'react';
 
-import { Box3 } from 'three';
-
-import { useReveal } from '../RevealContainer/RevealContext';
 import { Button } from '@cognite/cogs.js';
+import { useCameraNavigation } from '../../hooks/useCameraNavigation';
 
 export const FitModelsButton = (): ReactElement => {
-  const viewer = useReveal();
+  const cameraNavigation = useCameraNavigation();
 
   const updateCamera = useCallback(() => {
-    const box = new Box3();
-
-    viewer.models.forEach((model) => box.union(model.getModelBoundingBox()));
-
-    viewer.cameraManager.fitCameraToBoundingBox(box);
-  }, [viewer, ...viewer.models]);
+    cameraNavigation.fitCameraToAllModels();
+  }, []);
 
   return (
     <Button
diff --git a/react-components/src/hooks/useCameraNavigation.tsx b/react-components/src/hooks/useCameraNavigation.tsx
new file mode 100644
index 00000000000..a530e9c00e8
--- /dev/null
+++ b/react-components/src/hooks/useCameraNavigation.tsx
@@ -0,0 +1,68 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type CogniteCadModel } from '@cognite/reveal';
+import { useReveal } from '../components/RevealContainer/RevealContext';
+import { useFdmSdk } from '../components/RevealContainer/SDKProvider';
+import { SYSTEM_3D_EDGE_SOURCE, type InModel3dEdgeProperties } from '../utilities/globalDataModels';
+
+export type CameraNavigationActions = {
+  fitCameraToAllModels: () => void;
+  fitCameraToModelNode: (revisionId: number, nodeId: number) => Promise<void>;
+  fitCameraToInstance: (externalId: string, space: string) => Promise<void>;
+};
+
+export const useCameraNavigation = (): CameraNavigationActions => {
+  const viewer = useReveal();
+  const fdmSDK = useFdmSdk();
+
+  const fitCameraToAllModels = (): void => {
+    const models = viewer.models;
+    if (models.length === 0) {
+      return;
+    }
+    viewer.fitCameraToModels(models, undefined, true);
+  };
+
+  const fitCameraToModelNode = async (revisionId: number, nodeId: number): Promise<void> => {
+    const model = viewer.models.find((m) => m.revisionId === revisionId);
+    if (model === undefined) {
+      await Promise.reject(new Error(`Could not find model with revision ${revisionId}`));
+      return;
+    }
+    const nodeBoundingBox = await (model as CogniteCadModel).getBoundingBoxByNodeId(nodeId);
+    viewer.cameraManager.fitCameraToBoundingBox(nodeBoundingBox);
+  };
+
+  const fitCameraToInstance = async (externalId: string, space: string): Promise<void> => {
+    const fdmAssetMappingFilter = {
+      equals: {
+        property: ['edge', 'startNode'],
+        value: { externalId, space }
+      }
+    };
+
+    const assetEdges = await fdmSDK.filterInstances<InModel3dEdgeProperties>(
+      fdmAssetMappingFilter,
+      'edge',
+      SYSTEM_3D_EDGE_SOURCE
+    );
+
+    if (assetEdges.edges.length === 0) {
+      await Promise.reject(
+        new Error(`Could not find a connected model to instance ${externalId} in space ${space}`)
+      );
+      return;
+    }
+
+    const { revisionId, revisionNodeId } = assetEdges.edges[0].properties;
+    await fitCameraToModelNode(revisionId, revisionNodeId);
+  };
+
+  return {
+    fitCameraToAllModels,
+    fitCameraToInstance,
+    fitCameraToModelNode
+  };
+};
diff --git a/react-components/src/index.ts b/react-components/src/index.ts
index 9487a68d40f..fd392743e9f 100644
--- a/react-components/src/index.ts
+++ b/react-components/src/index.ts
@@ -11,7 +11,6 @@ export { CadModelContainer } from './components/CadModelContainer/CadModelContai
 export { Image360CollectionContainer } from './components/Image360CollectionContainer/Image360CollectionContainer';
 export { Image360HistoricalDetails } from './components/Image360HistoricalDetails/Image360HistoricalDetails';
 export { ViewerAnchor } from './components/ViewerAnchor/ViewerAnchor';
-export { CameraController } from './components/CameraController/CameraController';
 export { RevealToolbar } from './components/RevealToolbar/RevealToolbar';
 export { RevealKeepAlive } from './components/RevealKeepAlive/RevealKeepAlive';
 
@@ -19,6 +18,7 @@ export { RevealKeepAlive } from './components/RevealKeepAlive/RevealKeepAlive';
 export { useReveal } from './components/RevealContainer/RevealContext';
 export { use3DModelName } from './hooks/use3DModelName';
 export { useFdmAssetMappings } from './hooks/useFdmAssetMappings';
+export { useCameraNavigation } from './hooks/useCameraNavigation';
 
 // Higher order components
 export { withSuppressRevealEvents } from './higher-order-components/withSuppressRevealEvents';
@@ -44,4 +44,5 @@ export type {
   AddReveal3DModelOptions,
   NodeDataResult
 } from './components/Reveal3DResources/types';
+export type { CameraNavigationActions } from './hooks/useCameraNavigation';
 export type { Source } from './utilities/FdmSDK';
diff --git a/react-components/stories/CadModelContainer.stories.tsx b/react-components/stories/CadModelContainer.stories.tsx
index a22df1c12a8..b04060c390e 100644
--- a/react-components/stories/CadModelContainer.stories.tsx
+++ b/react-components/stories/CadModelContainer.stories.tsx
@@ -2,8 +2,8 @@
  * Copyright 2023 Cognite AS
  */
 import type { Meta, StoryObj } from '@storybook/react';
-import { CadModelContainer, CameraController, RevealContainer } from '../src';
-import { Color, Matrix4, Vector3 } from 'three';
+import { CadModelContainer, RevealContainer } from '../src';
+import { Color, Matrix4 } from 'three';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
 import { NumericRange } from '@cognite/reveal';
 
@@ -84,12 +84,6 @@ export const Main: Story = {
     <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
       <CadModelContainer addModelOptions={addModelOptions} styling={styling} />
       <CadModelContainer addModelOptions={addModelOptions} transform={transform} />
-      <CameraController
-        initialFitCamera={{
-          to: 'cameraState',
-          state: { position: new Vector3(10, 20, 15), target: new Vector3(10, 0, -10) }
-        }}
-      />
     </RevealContainer>
   )
 };
diff --git a/react-components/stories/HighlightNode.stories.tsx b/react-components/stories/HighlightNode.stories.tsx
index 8c133b58371..3e452442f9d 100644
--- a/react-components/stories/HighlightNode.stories.tsx
+++ b/react-components/stories/HighlightNode.stories.tsx
@@ -9,14 +9,15 @@ import {
   Reveal3DResources,
   type NodeDataResult,
   type AddResourceOptions,
-  CameraController,
-  type FdmAssetStylingGroup
+  type FdmAssetStylingGroup,
+  useCameraNavigation
 } from '../src';
 import { Color } from 'three';
 import { type ReactElement, useState, useCallback, useRef } from 'react';
 import { DefaultNodeAppearance, TreeIndexNodeCollection } from '@cognite/reveal';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { RevealResourcesFitCameraOnLoad } from './utilities/with3dResoursesFitCameraOnLoad';
 
 const meta = {
   title: 'Example/HighlightNode',
@@ -50,15 +51,6 @@ export const Main: Story = {
     return (
       <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
         <StoryContent resources={resources} />
-        <CameraController
-          initialFitCamera={{
-            to: 'allModels'
-          }}
-          cameraControlsOptions={{
-            changeCameraTargetOnClick: true,
-            mouseWheelAction: 'zoomToCursor'
-          }}
-        />
         <ReactQueryDevtools />
       </RevealContainer>
     );
@@ -68,21 +60,23 @@ export const Main: Story = {
 const StoryContent = ({ resources }: { resources: AddResourceOptions[] }): ReactElement => {
   const [highlightedId, setHighlightedId] = useState<string | undefined>(undefined);
   const stylingGroupsRef = useRef<FdmAssetStylingGroup[]>([]);
-  const callback = async (nodeData: Promise<NodeDataResult | undefined>): Promise<void> => {
-    const nodeDataResult = await nodeData;
-    setHighlightedId(nodeDataResult?.nodeExternalId);
+  const cameraNavigation = useCameraNavigation();
+  const onClick = useCallback(
+    async (nodeData: Promise<NodeDataResult | undefined>): Promise<void> => {
+      const nodeDataResult = await nodeData;
+      setHighlightedId(nodeDataResult?.nodeExternalId);
 
-    if (nodeDataResult === undefined) return;
+      if (nodeDataResult === undefined) return;
 
-    nodeDataResult.intersection.model.assignStyledNodeCollection(
-      new TreeIndexNodeCollection([nodeDataResult.cadNode.treeIndex]),
-      DefaultNodeAppearance.Highlighted
-    );
-  };
+      await cameraNavigation.fitCameraToInstance(nodeDataResult.nodeExternalId, 'pdms-mapping');
 
-  const onClick = useCallback((nodeData: Promise<NodeDataResult | undefined>) => {
-    void callback(nodeData);
-  }, []);
+      nodeDataResult.intersection.model.assignStyledNodeCollection(
+        new TreeIndexNodeCollection([nodeDataResult.cadNode.treeIndex]),
+        DefaultNodeAppearance.Highlighted
+      );
+    },
+    []
+  );
 
   if (stylingGroupsRef.current.length === 1) {
     stylingGroupsRef.current.pop();
@@ -97,7 +91,7 @@ const StoryContent = ({ resources }: { resources: AddResourceOptions[] }): React
 
   return (
     <>
-      <Reveal3DResources
+      <RevealResourcesFitCameraOnLoad
         resources={resources}
         instanceStyling={stylingGroupsRef.current}
         onNodeClick={onClick}
diff --git a/react-components/stories/ModelsStyling.stories.tsx b/react-components/stories/ModelsStyling.stories.tsx
index 33661c5f01d..38a70a13a2b 100644
--- a/react-components/stories/ModelsStyling.stories.tsx
+++ b/react-components/stories/ModelsStyling.stories.tsx
@@ -4,8 +4,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Reveal3DResources, RevealContainer } from '../src';
 import { Color, Matrix4 } from 'three';
-import { CameraController } from '../src/';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
+import { RevealResourcesFitCameraOnLoad } from './utilities/with3dResoursesFitCameraOnLoad';
 
 const model = {
   modelId: 2231774635735416,
@@ -81,15 +81,9 @@ export const Main: Story = {
             placement: 'topRight'
           }
         }}>
-        <Reveal3DResources resources={resources} defaultResourceStyling={defaultResourceStyling} />
-        <CameraController
-          initialFitCamera={{
-            to: 'allModels'
-          }}
-          cameraControlsOptions={{
-            changeCameraTargetOnClick: true,
-            mouseWheelAction: 'zoomToCursor'
-          }}
+        <RevealResourcesFitCameraOnLoad
+          resources={resources}
+          defaultResourceStyling={defaultResourceStyling}
         />
       </RevealContainer>
     );
diff --git a/react-components/stories/PointCloudContainer.stories.tsx b/react-components/stories/PointCloudContainer.stories.tsx
index 24049316fcb..de6b73677f2 100644
--- a/react-components/stories/PointCloudContainer.stories.tsx
+++ b/react-components/stories/PointCloudContainer.stories.tsx
@@ -2,8 +2,8 @@
  * Copyright 2023 Cognite AS
  */
 import type { Meta, StoryObj } from '@storybook/react';
-import { CameraController, PointCloudContainer, RevealContainer } from '../src';
-import { Color, Matrix4, Vector3 } from 'three';
+import { PointCloudContainer, RevealContainer } from '../src';
+import { Color, Matrix4 } from 'three';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
 
 const meta = {
@@ -56,15 +56,6 @@ export const Main: Story = {
         transform={transform}
         styling={styling}
       />
-      <CameraController
-        initialFitCamera={{
-          to: 'cameraState',
-          state: {
-            position: new Vector3(-10, 10, 22),
-            target: new Vector3(-10, -1, 10)
-          }
-        }}
-      />
     </RevealContainer>
   )
 };
diff --git a/react-components/stories/Reveal3DResources.stories.tsx b/react-components/stories/Reveal3DResources.stories.tsx
index 2be4378968a..8cab41a6e9e 100644
--- a/react-components/stories/Reveal3DResources.stories.tsx
+++ b/react-components/stories/Reveal3DResources.stories.tsx
@@ -4,8 +4,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Reveal3DResources, RevealContainer } from '../src';
 import { Color, Matrix4 } from 'three';
-import { CameraController } from '../src/';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
+import { RevealResourcesFitCameraOnLoad } from './utilities/with3dResoursesFitCameraOnLoad';
 
 const meta = {
   title: 'Example/Reveal3DResources',
@@ -51,16 +51,7 @@ export const Main: Story = {
             placement: 'topRight'
           }
         }}>
-        <Reveal3DResources resources={resources} />
-        <CameraController
-          initialFitCamera={{
-            to: 'allModels'
-          }}
-          cameraControlsOptions={{
-            changeCameraTargetOnClick: true,
-            mouseWheelAction: 'zoomToCursor'
-          }}
-        />
+        <RevealResourcesFitCameraOnLoad resources={resources} />
       </RevealContainer>
     );
   }
diff --git a/react-components/stories/RevealKeepAlive.stories.tsx b/react-components/stories/RevealKeepAlive.stories.tsx
index a252362b894..8717810cbcd 100644
--- a/react-components/stories/RevealKeepAlive.stories.tsx
+++ b/react-components/stories/RevealKeepAlive.stories.tsx
@@ -2,10 +2,11 @@
  * Copyright 2023 Cognite AS
  */
 import type { Meta, StoryObj } from '@storybook/react';
-import { CameraController, Reveal3DResources, RevealContainer, RevealKeepAlive } from '../src';
-import { Color, Matrix4, Vector3 } from 'three';
+import { RevealContainer, RevealKeepAlive } from '../src';
+import { Color, Matrix4 } from 'three';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
 import { useState, type ReactElement } from 'react';
+import { RevealResourcesFitCameraOnLoad } from './utilities/with3dResoursesFitCameraOnLoad';
 
 const meta = {
   title: 'Example/RevealKeepAlive',
@@ -51,7 +52,7 @@ const KeepAliveMockScenario = (): ReactElement => {
           {isRevealContainerMounted && (
             <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
               {isResourcesMounted && (
-                <Reveal3DResources
+                <RevealResourcesFitCameraOnLoad
                   resources={[
                     {
                       modelId: 1791160622840317,
@@ -73,12 +74,6 @@ const KeepAliveMockScenario = (): ReactElement => {
                   ]}
                 />
               )}
-              <CameraController
-                initialFitCamera={{
-                  to: 'cameraState',
-                  state: { position: new Vector3(10, 20, 15), target: new Vector3(10, 0, -10) }
-                }}
-              />
             </RevealContainer>
           )}
         </RevealKeepAlive>
diff --git a/react-components/stories/ViewerAnchor.stories.tsx b/react-components/stories/ViewerAnchor.stories.tsx
index 79b71bc3afc..0c91566639a 100644
--- a/react-components/stories/ViewerAnchor.stories.tsx
+++ b/react-components/stories/ViewerAnchor.stories.tsx
@@ -4,9 +4,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Reveal3DResources, RevealContainer, withSuppressRevealEvents } from '../src';
 import { Color, Vector3 } from 'three';
-import { CameraController, ViewerAnchor } from '../src/';
+import { ViewerAnchor } from '../src/';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
 import styled from 'styled-components';
+import { RevealResourcesFitCameraOnLoad } from './utilities/with3dResoursesFitCameraOnLoad';
 
 const meta = {
   title: 'Example/ViewerAnchor',
@@ -43,7 +44,7 @@ export const Main: Story = {
             placement: 'topRight'
           }
         }}>
-        <Reveal3DResources resources={resources} />
+        <RevealResourcesFitCameraOnLoad resources={resources} />
         <ViewerAnchor position={position}>
           <div
             style={{
@@ -72,15 +73,6 @@ export const Main: Story = {
             This label is stuck at position {position2.toArray().join(',')}
           </p>
         </ViewerAnchor>
-        <CameraController
-          initialFitCamera={{
-            to: 'allModels'
-          }}
-          cameraControlsOptions={{
-            changeCameraTargetOnClick: true,
-            mouseWheelAction: 'zoomToCursor'
-          }}
-        />
       </RevealContainer>
     );
   }
diff --git a/react-components/stories/utilities/with3dResoursesFitCameraOnLoad.tsx b/react-components/stories/utilities/with3dResoursesFitCameraOnLoad.tsx
new file mode 100644
index 00000000000..a984936200a
--- /dev/null
+++ b/react-components/stories/utilities/with3dResoursesFitCameraOnLoad.tsx
@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type ReactElement, useCallback } from 'react';
+
+import { useCameraNavigation, Reveal3DResources, type Reveal3DResourcesProps } from '../../src';
+
+type RevealResources = typeof Reveal3DResources;
+
+export function with3dResourcesFitCameraOnLoad(Component: RevealResources): RevealResources {
+  return function SuppressRevealEvents(props: Reveal3DResourcesProps): ReactElement {
+    const cameraNavigation = useCameraNavigation();
+
+    const onResourcesAdded = useCallback(() => {
+      cameraNavigation.fitCameraToAllModels();
+    }, []);
+
+    return <Component {...props} onResourcesAdded={onResourcesAdded} />;
+  };
+}
+
+export const RevealResourcesFitCameraOnLoad = with3dResourcesFitCameraOnLoad(Reveal3DResources);