Improve three scene performance and add JSCAD

- smoothed follow mouse animation
- made mobile friendlier down to about 330px ish
- added default social image
- used smaller hero asset

app/web/src/components/Hero/AssetWithGooey.tsx

@@ -4,23 +4,16 @@ import { useLoader, useThree, useFrame } from '@react-three/fiber'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit'
 import texture from 'src/components/IdeViewer/dullFrontLitMetal.png'
-import {
-  useTexture,
-  Environment,
-  MeshDistortMaterial,
-  Sphere,
-} from '@react-three/drei'
+import { useTexture, MeshDistortMaterial, Sphere } from '@react-three/drei'
 
 const thresholdAngle = 10
 export default function AssetWithGooey({
   assetUrl,
   offset,
-  preset,
   scale,
 }: {
   assetUrl: string
   offset: number[]
-  preset?: string
   scale: number
 }) {
   const geo = useLoader(STLLoader, assetUrl)
@@ -32,27 +25,31 @@ export default function AssetWithGooey({
   const position = [offset[0], offset[1], 5]
   const scaleArr = Array.from({ length: 3 }).map(() => scale)
   const { mouse } = useThree()
+  const [rEuler, rQuaternion] = useMemo(
+    () => [new THREE.Euler(), new THREE.Quaternion()],
+    []
+  )
   useFrame((state, delta) => {
     if (edgeRef.current) {
       edgeRef.current.rotation.y += 0.01
-
-      coffeeRef.current.rotation.x = (-mouse.y * Math.PI) / 6
-      coffeeRef.current.rotation.y = (mouse.x * Math.PI) / 6
+    }
+    if (coffeeRef.current) {
+      rEuler.set((-mouse.y * Math.PI) / 4, (mouse.x * Math.PI) / 2, 0)
+      coffeeRef.current.quaternion.slerp(rQuaternion.setFromEuler(rEuler), 0.1)
     }
   })
   return (
     <group dispose={null} ref={edgeRef} position={position}>
       <group ref={coffeeRef}>
-        <Environment preset={preset || 'warehouse'} />
         <mesh ref={mesh} scale={scaleArr} geometry={geo}>
           <meshPhysicalMaterial
             envMapIntensity={2}
             color="#F472B6"
             map={colorMap}
-            clearcoat={0.2}
+            clearcoat={0.5}
             clearcoatRoughness={0.01}
-            roughness={1}
-            metalness={0.9}
+            roughness={0}
+            metalness={0.7}
             smoothShading
           />
         </mesh>
@@ -60,12 +57,7 @@ export default function AssetWithGooey({
           <lineBasicMaterial color="#aaaaff" />
         </lineSegments>
       </group>
-      <pointLight
-        position={[-1000, -1000, 1000]}
-        color="#5555FF"
-        intensity={1}
-      />
-      <ambientLight intensity={0.3} />
+      <ambientLight intensity={2} />
       <Gooey />
     </group>
   )
@@ -77,7 +69,7 @@ function randomSign(num: number): number {
 
 function Gooey() {
   const blobsData = useMemo(() => {
-    const firstSet = Array.from({ length: 10 }).map((_, index) => {
+    const firstSet = Array.from({ length: 5 }).map((_, index) => {
       const dist = Math.random() * 3 + 2.5
       const x = randomSign(Math.random() * dist)
       const y = randomSign(Math.sqrt(dist * dist - x * x))
@@ -88,7 +80,7 @@ function Gooey() {
       const speed = (Math.random() * 0.8) / size / size + 0.1
       return { position, size, distort, speed }
     })
-    const secondSet = Array.from({ length: 10 }).map((_, index) => {
+    const secondSet = Array.from({ length: 5 }).map((_, index) => {
       const dist = Math.random() * 3 + 1.5
       const x = randomSign(Math.random() * dist)
       const y = randomSign(Math.sqrt(dist * dist - x * x))
@@ -106,11 +98,11 @@ function Gooey() {
       {blobsData.map(({ position, size, distort, speed }, index) => (
         <Sphere key={index} visible position={position} args={[size, 16, 200]}>
           <MeshDistortMaterial
-            color="#5098F1"
+            color="#173E6F"
             attach="material"
             distort={distort} // Strength, 0 disables the effect (default=1)
             speed={speed} // Speed (default=1)
-            roughness={0}
+            roughness={0.2}
             opacity={0.6}
             transparent
           />