From 799a32544b6142466e61b3c8366ffc56b2635325 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Wed, 11 Aug 2021 07:01:09 +1000
Subject: [PATCH] Use forked useEdegeSplit to allow updating geomerty

---
 .../src/components/IdeViewer/IdeViewer.tsx    |  8 +++--
 app/web/src/helpers/hooks/useEdegeSplit.ts    | 30 +++++++++++++++++++
 2 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 app/web/src/helpers/hooks/useEdegeSplit.ts

diff --git a/app/web/src/components/IdeViewer/IdeViewer.tsx b/app/web/src/components/IdeViewer/IdeViewer.tsx
index 222768a..38faa9a 100644
--- a/app/web/src/components/IdeViewer/IdeViewer.tsx
+++ b/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
diff --git a/app/web/src/helpers/hooks/useEdegeSplit.ts b/app/web/src/helpers/hooks/useEdegeSplit.ts
new file mode 100644
index 0000000..47d3bf1
--- /dev/null
+++ b/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
+}