fix for react-fiber not properly cleaning the scene

app/web/src/components/IdeViewer/IdeViewer.tsx

@@ -10,9 +10,12 @@ import { TextureLoader } from 'three/src/loaders/TextureLoader'
 const loader = new TextureLoader()
 const colorMap = loader.load(texture)
 
+let lastGroup
+
 extend({ OrbitControls })
 
 function Asset({ geometry: incomingGeo }) {
+  const state = useThree()
   const mesh = useRef()
   const ref = useRef<any>({})
   useLayoutEffect(() => {
@@ -22,6 +25,19 @@ function Asset({ geometry: incomingGeo }) {
   }, [incomingGeo])
   if (!incomingGeo) return null
 
+  let groupData = incomingGeo.children ? incomingGeo : null
+  if(lastGroup && lastGroup != groupData){
+    state.scene.remove(lastGroup)
+    lastGroup.children.forEach(c=>c?.geometry?.dispose())
+    // returning <primitive  object={groupData} /> does not add the new group to the scene
+    // there is probably some useRef magic that would make this work, but I don't have time to reseach it
+    /// FIXME - do this properly with useRef or other react magic
+    if(groupData) state.scene.add(groupData)
+  }
+  lastGroup = groupData
+
+  if(groupData) return <primitive object={groupData} />
+
   if (incomingGeo.children) return <primitive object={incomingGeo} />
 
   return (