From 484c50c921727ee19499d507269f667be26e6767 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Thu, 12 Aug 2021 06:15:23 +1000
Subject: [PATCH] Adjust scene lighting, attach light to camera for consistent
 lighting

---
 .../src/components/IdeViewer/IdeViewer.tsx    | 21 ++++++++++++++-----
 app/web/src/helpers/hooks/useEdegeSplit.ts    | 12 +++++++++--
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/app/web/src/components/IdeViewer/IdeViewer.tsx b/app/web/src/components/IdeViewer/IdeViewer.tsx
index 38faa9a..b17f1f0 100644
--- a/app/web/src/components/IdeViewer/IdeViewer.tsx
+++ b/app/web/src/components/IdeViewer/IdeViewer.tsx
@@ -25,7 +25,9 @@ function Asset({ geometry: incomingGeo }) {
   const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, incomingGeo)
   const edges = React.useMemo(
     () =>
-      incomingGeo.length ? null : new THREE.EdgesGeometry(incomingGeo, thresholdAngle),
+      incomingGeo.length
+        ? null
+        : new THREE.EdgesGeometry(incomingGeo, thresholdAngle),
     [incomingGeo]
   )
   if (!incomingGeo) return null
@@ -211,11 +213,20 @@ const IdeViewer = ({ Loading }) => {
               })
             }}
           />
-          <PerspectiveCamera makeDefault up={[0, 0, 1]} />
+          <PerspectiveCamera makeDefault up={[0, 0, 1]}>
+            <pointLight position={[0, 0, 100]} intensity={1.2} />
+          </PerspectiveCamera>
           <ambientLight intensity={0.3} />
-          <pointLight position={[15, 5, 10]} intensity={0.1} />
-          <pointLight position={[-1000, -1000, -1000]} intensity={1} />
-          <pointLight position={[-1000, 0, 1000]} intensity={1} />
+          <pointLight
+            position={[-1000, -1000, -1000]}
+            color="#5555FF"
+            intensity={0.5}
+          />
+          <pointLight
+            position={[-1000, 0, 1000]}
+            color="#5555FF"
+            intensity={0.5}
+          />
           <gridHelper
             args={[200, 20, 0xff5555, 0x555555]}
             material-opacity={0.2}
diff --git a/app/web/src/helpers/hooks/useEdegeSplit.ts b/app/web/src/helpers/hooks/useEdegeSplit.ts
index 47d3bf1..3e047b5 100644
--- a/app/web/src/helpers/hooks/useEdegeSplit.ts
+++ b/app/web/src/helpers/hooks/useEdegeSplit.ts
@@ -5,7 +5,11 @@ 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) {
+export function useEdgeSplit(
+  cutOffAngle: number,
+  tryKeepNormals = true,
+  dependantGeometry?: any
+) {
   const ref = React.useRef<THREE.Mesh>()
   const original = React.useRef<THREE.BufferGeometry>()
   const modifier = React.useRef<EdgeSplitModifier>()
@@ -19,7 +23,11 @@ export function useEdgeSplit(cutOffAngle: number, tryKeepNormals: boolean = true
 
   React.useEffect(() => {
     if (original.current && ref.current && modifier.current) {
-      const modifiedGeometry = modifier.current.modify(original.current, cutOffAngle, tryKeepNormals)
+      const modifiedGeometry = modifier.current.modify(
+        original.current,
+        cutOffAngle,
+        tryKeepNormals
+      )
       modifiedGeometry.computeVertexNormals()
 
       ref.current.geometry = modifiedGeometry