fix(CrashOnRemount): scene-composer doesn't crash when remounted now

packages/scene-composer/src/components/three-fiber/EditorCamera.tsx

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import React, { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { PerspectiveCamera } from '@react-three/drei/core/PerspectiveCamera';
 import { Camera, useFrame, useThree } from '@react-three/fiber';
@@ -24,7 +24,7 @@ import { getSafeBoundingBox } from '../../utils/objectThreeUtils';
 
 import { MapControls, OrbitControls } from './controls';
 
-export const EditorMainCamera = React.forwardRef<Camera>((_, forwardedRef) => {
+export const EditorMainCamera = forwardRef<Camera>((_, forwardedRef) => {
   const log = useLogger('EditorMainCamera');
 
   const matterportSdk = useMatterportSdk();

packages/scene-composer/src/components/three-fiber/controls/OrbitControls.tsx

@@ -47,7 +47,7 @@ export const OrbitControls = forwardRef<OrbitControlsImpl, OrbitControlsProps>(
         if (onChange) onChange(e);
       };
 
-      controls.connect(explDomElement!);
+      controls.connect(explDomElement || gl.domElement);
       controls.addEventListener('change', callback);
 
       if (onStart) controls.addEventListener('start', onStart);

packages/scene-composer/stories/SceneViewer.stories.mdx

@@ -1,5 +1,7 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
+import { useState, useCallback } from 'react';
+
 import SceneViewer, { argTypes, args } from './components/scene-viewer';
 import { testScenes } from '../tests/testData';
 import { COMPOSER_FEATURES } from '../src/interfaces/feature';
@@ -26,6 +28,24 @@ export const Template = (args) => {
   return <SceneViewer {...defaultArgs} {...args} />
 }
 
+export const MountToggle = (args) => {
+  const [isMounted, setIsMounted] = useState(true)
+  const toggleVisibility = useCallback(() => {
+    setIsMounted(!isMounted)
+  }, [isMounted])
+  return (
+    <div>
+      <label>
+        <input type="checkbox" onChange={toggleVisibility} checked={isMounted} />
+          mounted
+      </label>
+      <div style={{ position: 'relative', height: '100vh' }}>
+      { isMounted && <SceneViewer {...defaultArgs} {...args} />}
+      </div>
+    </div>
+  )
+}
+
 # Scene Viewer
 
 ## Motion Indicator
@@ -50,4 +70,22 @@ Motion Indicators should disappear when turned off.
   </Story>
 </Canvas>
 
-## Sub Model Selection
+## Loading and Unloading
+
+The scene viewer should be able to be mounted and unmounted as needed by the software application. While in production, this is discourage due to the size and complexity of this component,
+during development Hot-Module-Reloaders (HMR) typically do this all the time, so the component shouldn't crash
+
+#### Steps:
+- Click the button to remount the component
+
+#### Verification:
+- It should reload without errors.
+
+<Canvas>
+  <Story name='Remounting'
+    height='500px'
+    parameters={{ controls: { include: ['onSelectionChanged', 'onWidgetClick'], hideNoControlsWarning: true }}}
+    args={{ ...defaultArgs, scene: 'CookieFactoryWaterTank' }}>
+    {MountToggle.bind({})}
+  </Story>
+</Canvas>