Add more scene tweaks

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

@@ -7,18 +7,16 @@ import {
   GizmoHelper,
   GizmoViewport,
   OrbitControls,
+  Environment,
+  useTexture,
 } 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'
-import { TextureLoader } from 'three/src/loaders/TextureLoader'
 import Customizer from 'src/components/Customizer/Customizer'
 import DelayedPingAnimation from 'src/components/DelayedPingAnimation/DelayedPingAnimation'
 
-const loader = new TextureLoader()
-const colorMap = loader.load(texture)
-
 const thresholdAngle = 12
 
 function Asset({ geometry: incomingGeo }) {
@@ -30,6 +28,7 @@ function Asset({ geometry: incomingGeo }) {
         : new THREE.EdgesGeometry(incomingGeo, thresholdAngle),
     [incomingGeo]
   )
+  const colorMap = useTexture(texture)
   if (!incomingGeo) return null
 
   if (incomingGeo.length)
@@ -40,10 +39,19 @@ function Asset({ geometry: incomingGeo }) {
   return (
     <group dispose={null}>
       <mesh ref={mesh} scale={[1, 1, 1]} geometry={incomingGeo}>
-        <meshStandardMaterial map={colorMap} color="#F472B6" />
+        <meshPhysicalMaterial
+          envMapIntensity={2}
+          color="#F472B6"
+          map={colorMap}
+          clearcoat={0.1}
+          clearcoatRoughness={0.2}
+          roughness={10}
+          metalness={0.9}
+          smoothShading
+        />
       </mesh>
-      <lineSegments geometry={edges} renderOrder={100} opac>
-        <lineBasicMaterial color="#555588" opacity={0.5} transparent />
+      <lineSegments geometry={edges} renderOrder={100}>
+        <lineBasicMaterial color="#aaaaff" opacity={0.5} transparent />
       </lineSegments>
     </group>
   )
@@ -163,6 +171,12 @@ const IdeViewer = ({ Loading }) => {
   const pink400 = '#F472B6'
   const indigo300 = '#A5B4FC'
   const indigo900 = '#312E81'
+  const jscadLightIntensity =
+    state.objectData?.type === 'geometry' &&
+    state.objectData?.data &&
+    state.objectData?.data.length
+      ? 0.5
+      : 1.2
   return (
     <div className="relative h-full bg-ch-gray-800">
       {state.isLoading && Loading}
@@ -188,7 +202,7 @@ const IdeViewer = ({ Loading }) => {
         }`}
         onMouseDown={() => setIsDragging(true)}
       >
-        <Canvas>
+        <Canvas linear={true} dpr={[1, 2]}>
           <Controls
             onDragStart={() => setIsDragging(true)}
             onInit={onInit}
@@ -214,9 +228,13 @@ const IdeViewer = ({ Loading }) => {
             }}
           />
           <PerspectiveCamera makeDefault up={[0, 0, 1]}>
-            <pointLight position={[0, 0, 100]} intensity={1.2} />
+            <pointLight
+              position={[0, 0, 100]}
+              intensity={jscadLightIntensity}
+            />
           </PerspectiveCamera>
           <ambientLight intensity={0.3} />
+          <Environment preset="warehouse" />
           <pointLight
             position={[-1000, -1000, -1000]}
             color="#5555FF"

app/yarn.lock

@@ -7859,9 +7859,9 @@ detect-file@^1.0.0:
   integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
 
 detect-gpu@^3.0.0:
-  version "3.1.12"
-  resolved "https://registry.yarnpkg.com/detect-gpu/-/detect-gpu-3.1.12.tgz#fc343765d9e4c1a5c6543441ae246778c5e87569"
-  integrity sha512-cjSD8wyHykxun3TdEv2HfQZOs5iBmQFf/xoVWTrnz3Ktvjn5vNs6vAoFzsyTrW4KPtOtzCnJHrkc3YKj81Okkw==
+  version "3.1.11"
+  resolved "https://registry.yarnpkg.com/detect-gpu/-/detect-gpu-3.1.11.tgz#433f07fb8e505cb5e8975d23820fd4d00ec65f9b"
+  integrity sha512-JcmbzhdVfOPf0wNheytEEVD+tRZ3Lj6XQUBGKNdDjWW5Fb9xitTuBXdXnB1vcLy5DQMeSzYGFJVI66uAk4vnvA==
   dependencies:
     webgl-constants "^1.1.1"
 
@@ -17239,9 +17239,9 @@ text-table@0.2.0, text-table@^0.2.0:
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
 three-mesh-bvh@^0.4.1:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/three-mesh-bvh/-/three-mesh-bvh-0.4.2.tgz#d6ad431a1a1e5bce6f309e27cbb2db0142c9fb27"
-  integrity sha512-dApttQDxi8aFaRqRJt6JQ+UYUQpIwZ4Zu4VhoVv9GugTaT0gFcPeo7ud9dzmq6HsLGX8p2i7VrO/zLu7mQ4VDQ==
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/three-mesh-bvh/-/three-mesh-bvh-0.4.1.tgz#ba0bf1dac7cbd41f2132c8446545c8ad9fbeb892"
+  integrity sha512-1ALlGVjArZpi0SdqZhjwFA3DZHgBF/Uo4LnL8G7PczI7rpOoBK87CaBL073DVrrbIE4OONJvpq/PEzluKoRHbg==
 
 three-stdlib@^2.4.0:
   version "2.4.0"