useEntities directly

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

@@ -10,12 +10,9 @@ 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(() => {
@@ -25,20 +22,10 @@ function Asset({ geometry: incomingGeo }) {
   }, [incomingGeo])
   if (!incomingGeo) return null
 
-  const 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} />
+  if (incomingGeo.length)
+    return incomingGeo.map((shape, index) => (
+      <primitive object={shape} key={index} />
+    ))
 
   return (
     <mesh ref={mesh} scale={[1, 1, 1]}>

app/web/src/helpers/cadPackages/jsCadController.ts

@@ -57,7 +57,7 @@ function CSG2Object3D(obj) {
   switch (obj.type) {
     case 'mesh':
       geo.setIndex(new BufferAttribute(indices, 1))
-      mesh = new THREE.Mesh(geo, material)
+      mesh = new Mesh(geo, material)
       break
     case 'line':
       mesh = new Line(geo, material)
@@ -99,20 +99,14 @@ self.addEventListener('message', (e)=>worker.postMessage(e.data))
     const blob = new Blob([script], { type: 'text/javascript' })
     scriptWorker = new Worker(window.URL.createObjectURL(blob))
     scriptWorker.addEventListener('message', (e) => {
-      console.log('message from worker', e.data)
       const data = e.data
       if (data.action == 'entities') {
         if (data.error) {
           response = createUnhealthyResponse(new Date(), data.error)
         } else {
-          const group = new Group()
-          data.entities
-            .map(CSG2Object3D)
-            .filter((o) => o)
-            .forEach((o) => group.add(o))
           response = createHealthyResponse({
             type: 'geometry',
-            data: group,
+            data: [...data.entities.map(CSG2Object3D).filter((o) => o)],
             consoleMessage: data.scriptStats,
             date: new Date(),
           })
@@ -138,7 +132,6 @@ self.addEventListener('message', (e)=>worker.postMessage(e.data))
 
   await waitResult
   resolveReference = null
-  console.log('response', response)
   return response
 }