From ad36233e94d59a42bc83d84f15f308b9849b44e3 Mon Sep 17 00:00:00 2001
From: Tekiter <tekiter8@gmail.com>
Date: Sat, 29 Jul 2023 18:18:27 +0900
Subject: [PATCH] =?UTF-8?q?feat:=203D=20=EB=A1=9C=EA=B3=A0=20=EC=83=89?=
 =?UTF-8?q?=EC=83=81=20=EC=A0=9C=EA=B1=B0=20(#58)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/MakersLogo3D/Light.tsx  | 63 +++++--------------
 .../components/common/MakersLogo3D/index.tsx  | 39 +-----------
 2 files changed, 18 insertions(+), 84 deletions(-)

diff --git a/apps/web/src/components/common/MakersLogo3D/Light.tsx b/apps/web/src/components/common/MakersLogo3D/Light.tsx
index e428536..8c2c3bf 100644
--- a/apps/web/src/components/common/MakersLogo3D/Light.tsx
+++ b/apps/web/src/components/common/MakersLogo3D/Light.tsx
@@ -1,58 +1,27 @@
 'use client';
 
-import { useFrame } from '@react-three/fiber';
-import { MotionValue, transform, useMotionValueEvent, useTransform } from 'framer-motion';
-import { FC, useRef } from 'react';
-import { SpotLight, Vector3 } from 'three';
+import { FC } from 'react';
 
-interface LightProps {
-  progress: MotionValue<number>;
-}
+interface LightProps {}
 
-const Light: FC<LightProps> = ({ progress }) => {
+const Light: FC<LightProps> = ({}) => {
   return (
     <>
-      <MotionLight progress={progress} color='#FF6E1D' range={[0, 0.2]} />
-      <MotionLight progress={progress} color='#5DDBFF' range={[0.2, 0.4]} />
-      <MotionLight progress={progress} color='#474fad' range={[0.4, 0.6]} />
-      <MotionLight progress={progress} color='#FDBBF9' range={[0.6, 0.8]} />
-      <MotionLight progress={progress} color='#FFCA00' range={[0.8, 1]} />
+      <ambientLight intensity={0.01} />
+      <hemisphereLight intensity={0.125} color='#8040df' groundColor='red' />
+      <spotLight
+        castShadow
+        color='#d9dcc0'
+        intensity={1.5}
+        position={[-50, 50, 40]}
+        angle={0.25}
+        penumbra={1}
+        shadow-mapSize={[128, 128]}
+        shadow-bias={0.00005}
+      />
+      <directionalLight color='#b1c1da' intensity={0.3} position={[3, 2, 3]} />
     </>
   );
 };
 
 export default Light;
-
-interface MotionLightProps {
-  progress: MotionValue<number>;
-  color: string;
-  range: [number, number];
-}
-
-// const maxIntensity = 0.3;
-const transformX = transform([0, 1], [1, -1]);
-const transformY = transform([0, 1], [-1, 1]);
-const transformIntensity = transform([0, 0.5, 1], [0, 1, 0], {});
-
-const MotionLight: FC<MotionLightProps> = ({ color, progress, range }) => {
-  const ranged = useTransform(progress, range, [0, 1]);
-  const light = useRef<SpotLight>(null);
-
-  const targetVec = useRef(new Vector3(0, 0, 2));
-
-  useMotionValueEvent(ranged, 'change', (v) => console.log(color, transformIntensity(v)));
-
-  useFrame(() => {
-    const cur = ranged.get();
-    targetVec.current.setX(transformX(cur));
-    targetVec.current.setY(transformY(cur));
-
-    if (light.current) {
-      light.current.position.lerp(targetVec.current, 0.2);
-
-      light.current.intensity = transformIntensity(cur);
-    }
-  });
-
-  return <spotLight ref={light} color={color} position={[-10, -10, -10]} />;
-};
diff --git a/apps/web/src/components/common/MakersLogo3D/index.tsx b/apps/web/src/components/common/MakersLogo3D/index.tsx
index ef39f74..8cfed8c 100644
--- a/apps/web/src/components/common/MakersLogo3D/index.tsx
+++ b/apps/web/src/components/common/MakersLogo3D/index.tsx
@@ -2,7 +2,7 @@
 
 import { Canvas, useFrame } from '@react-three/fiber';
 import clsx from 'clsx';
-import { MotionValue, useAnimationFrame, useMotionValue } from 'framer-motion';
+import { MotionValue, useMotionValue } from 'framer-motion';
 import { FC, useEffect, useRef } from 'react';
 import { Group, Vector3 } from 'three';
 
@@ -46,45 +46,10 @@ const MakersLogo3D: FC<MakersLogo3DProps> = ({ className }) => {
     };
   }, [posX, posY]);
 
-  const value = useMotionValue(0);
-
-  // useEffect(() => {
-  //   const v = 0;
-
-  //   const cancel = requestAnimationFrame(() => {
-  //     value.set(value.get());
-  //   });
-
-  //   return () => {
-  //     cancelAnimationFrame(cancel);
-  //   };
-  // }, []);
-
-  useAnimationFrame(() => {
-    let newValue = value.get() + 5 / 6000;
-    if (newValue >= 1) {
-      newValue -= 1;
-    }
-    value.set(newValue);
-  });
-
   return (
     <div ref={containerRef} className={clsx('h-[200px]', className)}>
       <Canvas dpr={[1, 2]} camera={{ position: [0, 0, 2] }}>
-        <ambientLight intensity={0.01} />
-        <hemisphereLight intensity={0.125} color='#8040df' groundColor='red' />
-        {/* <spotLight
-          castShadow
-          color='#d9dcc0'
-          intensity={1.5}
-          position={[-50, 50, 40]}
-          angle={0.25}
-          penumbra={1}
-          shadow-mapSize={[128, 128]}
-          shadow-bias={0.00005}
-        /> */}
-        <directionalLight color='#b1c1da' intensity={0.3} position={[3, 2, 3]} />
-        <Light progress={value} />
+        <Light />
         <Inner posY={posY} posX={posX} />
       </Canvas>
     </div>