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() + const original = React.useRef() + const modifier = React.useRef() + + 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 +}