[마우스 형태, 구름, 별 효과]

마우스 형태 바꾸기

Canvas 의 Mesh 에 마우스를 올렸을 시 마우스 형태를 변경하는것은 해당 Mesh 가 onPointerEnter 되었을 때
body 에 클래스를 추가하는 방식으로 구현 가능

useEffect(() => {
    const bodyClassList = window?.document.body.classList;
    if (isHover) {
      bodyClassList.add("drag");
    } else {
      bodyClassList.remove("drag");
    }

    return () => {
      bodyClassList.remove("drag");
    };
}, [isHover]);

---

구름 효과 넣어보기

drei 의 Clouds, Cloud 컴포넌트 사용
Clouds 로 감싸면 단일 인스턴스화된 Draw Call

import { Clouds, Cloud } from "@react-three/drei";

const vector3 = new Vector3(5, 0.5, 1);

return (
  <Clouds>
    <Cloud
      position-x={-5}
      // 구름의 투명도
      opacity={0.4}
      // 구름의 움직이는 속도
      speed={0.4}
      // 구름의 분포도 (default (5,1,1))
      bounds={vector3}
      // 구름 segments 크기 
      // scale={vector3}
      // segments 를 어떤 식으로 배치할 지
      // concentrate="random"
      // 값이 클수록 더 희미한 안개 (default: 10)
      // fade={10}
      // 구름 particle 갯수
      segments={3}
      // 구름의 색상
      // color="blue"
   />
 </Clouds>
);

---

별 효과 넣어보기

import { Stars } from "@react-three/drei";

<Stars
   // 별들을 이루는 큰 구형의 반지름 (별들이 외곽에 몰려있음)
   radius={1}
   // 별들을 이루는 큰 구형의 크기 (별들이 고르게 분포됨)
   depth={1}
   // 별의 갯수
   count={10000}
   // 별의 크기
   factor={1}
   // 채도
   saturation={0}
   // 별의 가장자리 부분 fade (별들을 동그랗게 만듬)
   fade
   // 별들의 깜빡임 속도
   speed={1}
/>

---

Sparkles 효과 넣어보기

주변에 둥둥 떠다니는 입자 효과 (반딧불이)

import { Sparkles } from "@react-three/drei";

<Sparkles
   // 갯수
   count={80}
   // 분포도
   scale={2.8}
   // 크기
   size={5}
   // 움직임
   speed={0.5}
   // 투명도
   // opacity={0.5}
   // 색상
   // color="black"
/>