massive refactor toDrop cascadeStudio and add CadQuery + OpenSCAD

resolves #400

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

@@ -1,12 +1,6 @@
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
-import { useRef, useState, useEffect } from 'react'
-import {
-  Canvas,
-  extend,
-  useFrame,
-  useThree,
-  useUpdate,
-} from 'react-three-fiber'
+import { useRef, useState, useEffect, useLayoutEffect } from 'react'
+import { Canvas, extend, useFrame, useThree } from '@react-three/fiber'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { Vector3 } from 'three'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
@@ -20,9 +14,12 @@ extend({ OrbitControls })
 
 function Asset({ geometry: incomingGeo }) {
   const mesh = useRef()
-  const ref = useUpdate((geometry) => {
-    geometry.attributes = incomingGeo.attributes
-  })
+  const ref = useRef<any>({})
+  useLayoutEffect(() => {
+    if (incomingGeo?.attributes) {
+      ref.current.attributes = incomingGeo.attributes
+    }
+  }, [incomingGeo])
   if (!incomingGeo) return null
   return (
     <mesh ref={mesh} scale={[1, 1, 1]}>
@@ -33,9 +30,13 @@ function Asset({ geometry: incomingGeo }) {
 }
 
 let debounceTimeoutId
-function Controls({ onCameraChange, onDragStart }) {
-  const controls = useRef()
-  const { camera, gl } = useThree()
+function Controls({ onCameraChange, onDragStart, onInit }) {
+  const controls = useRef<any>()
+  const threeInstance = useThree()
+  const { camera, gl } = threeInstance
+  useEffect(() => {
+    onInit(threeInstance)
+  }, [])
   useEffect(() => {
     // init camera position
     camera.position.x = 200
@@ -49,7 +50,7 @@ function Controls({ onCameraChange, onDragStart }) {
     // in Three.js Y is the vertical axis (Z for openscad)
     camera.rotation._order = 'YXZ'
     const getRotations = () => {
-      const { x, y, z } = camera.rotation
+      const { x, y, z } = camera?.rotation || {}
       const rad2Deg = 180 / Math.PI
       const scadX = (x + Math.PI / 2) * rad2Deg
       const scadZ = y * rad2Deg
@@ -100,8 +101,8 @@ function Controls({ onCameraChange, onDragStart }) {
         onDragStart()
         clearTimeout(debounceTimeoutId)
       }
-      controls.current.addEventListener('end', dragCallback)
-      controls.current.addEventListener('start', dragStart)
+      controls?.current?.addEventListener('end', dragCallback)
+      controls?.current?.addEventListener('start', dragStart)
       const oldCurrent = controls.current
       dragCallback()
       return () => {
@@ -141,11 +142,16 @@ function Sphere(props) {
     </mesh>
   )
 }
+
 const IdeViewer = ({ Loading }) => {
   const { state, thunkDispatch } = useIdeContext()
   const [isDragging, setIsDragging] = useState(false)
   const [image, setImage] = useState()
 
+  const onInit = (threeInstance) => {
+    thunkDispatch({ type: 'setThreeInstance', payload: threeInstance })
+  }
+
   useEffect(() => {
     setImage(state.objectData?.type === 'png' && state.objectData?.data)
     setIsDragging(false)
@@ -164,7 +170,12 @@ const IdeViewer = ({ Loading }) => {
             isDragging ? 'opacity-25' : 'opacity-100'
           }`}
         >
-          <img alt="code-cad preview" src={image} className="h-full w-full" />
+          <img
+            alt="code-cad preview"
+            id="special"
+            src={URL.createObjectURL(image)}
+            className="h-full w-full"
+          />
         </div>
       )}
       <div // eslint-disable-line jsx-a11y/no-static-element-interactions
@@ -178,6 +189,7 @@ const IdeViewer = ({ Loading }) => {
         <Canvas>
           <Controls
             onDragStart={() => setIsDragging(true)}
+            onInit={onInit}
             onCameraChange={(camera) => {
               thunkDispatch({
                 type: 'updateCamera',