feat: 3D 로고 색상 제거 (#58)

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]} />;
-};

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>