Use forked useEdegeSplit to allow updating geomerty

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

@@ -4,11 +4,11 @@ import { useRef, useState, useEffect } from 'react'
 import { Canvas, useThree } from '@react-three/fiber'
 import {
   PerspectiveCamera,
-  useEdgeSplit,
   GizmoHelper,
   GizmoViewport,
   OrbitControls,
 } from '@react-three/drei'
+import { useEdgeSplit } from 'src/helpers/hooks/useEdegeSplit'
 import { Vector3 } from 'three'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
 import texture from './dullFrontLitMetal.png'
@@ -19,11 +19,13 @@ import DelayedPingAnimation from 'src/components/DelayedPingAnimation/DelayedPin
 const loader = new TextureLoader()
 const colorMap = loader.load(texture)
 
+const thresholdAngle = 12
+
 function Asset({ geometry: incomingGeo }) {
-  const mesh = useEdgeSplit((12 * Math.PI) / 180, true)
+  const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, incomingGeo)
   const edges = React.useMemo(
     () =>
-      incomingGeo.length ? null : new THREE.EdgesGeometry(incomingGeo, 15),
+      incomingGeo.length ? null : new THREE.EdgesGeometry(incomingGeo, thresholdAngle),
     [incomingGeo]
   )
   if (!incomingGeo) return null

app/web/src/helpers/hooks/useEdegeSplit.ts

@@ -0,0 +1,30 @@
+// This code has been copied from https://github.com/pmndrs/drei/blob/master/src/core/useEdgeSplit.tsx
+// but modified to allow for updating geometry with `dependantGeometry`
+
+import * as React from 'react'
+import * as THREE from 'three'
+import { EdgeSplitModifier } from 'three-stdlib'
+
+export function useEdgeSplit(cutOffAngle: number, tryKeepNormals: boolean = true, dependantGeometry?: any) {
+  const ref = React.useRef<THREE.Mesh>()
+  const original = React.useRef<THREE.BufferGeometry>()
+  const modifier = React.useRef<EdgeSplitModifier>()
+
+  React.useEffect(() => {
+    if (!original.current && ref.current) {
+      original.current = ref.current.geometry.clone()
+      modifier.current = new EdgeSplitModifier()
+    }
+  }, [dependantGeometry])
+
+  React.useEffect(() => {
+    if (original.current && ref.current && modifier.current) {
+      const modifiedGeometry = modifier.current.modify(original.current, cutOffAngle, tryKeepNormals)
+      modifiedGeometry.computeVertexNormals()
+
+      ref.current.geometry = modifiedGeometry
+    }
+  }, [cutOffAngle, tryKeepNormals, dependantGeometry])
+
+  return ref
+}