[여러가지 Event]

Mesh 의 Event 들 알아보기

<mesh
 onClick={(e) => console.log('클릭')}
 onContextMenu={(e) => console.log('콘텍스트 메뉴, 오른쪽 마우스 클릭')}
 onDoubleClick={(e) => console.log('더블 클릭')}
 onWheel={(e) => console.log('마우스 휠')}
 onPointerUp={(e) => console.log('마우스에서 손 뗐을 때(위로)')}
 onPointerDown={(e) => console.log('마우스 버튼을 눌렀을 때(아래로)')}
 onPointerOver={(e) => console.log('포인터가 객체 위에 올라감')}
 onPointerOut={(e) => console.log('포인터가 객체를 벗어남')}
 onPointerEnter={(e) => console.log('포인터가 객체 내로 들어가는 타이밍')}
 onPointerLeave={(e) => console.log('포인터가 객체에서 벗어나는 타이밍')}
 onPointerMove={(e) => console.log('포인터가 객체내에서 이동 중')}
 onPointerMissed={() => console.log('포인터가 객체내에서 잃어버림 (벗어난 영역 클릭해야 동작)')}
 onUpdate={(self) => console.log('프로퍼티가 업데이트됨')}
/>

mesh 가 아닌 group 에도 이벤트를 주면 e.object 로 클릭된 mesh 를 받아올 수 있음
RayCaster 때문인지는 몰라도 겹쳐있는 Mesh 를 클릭 시 여러개의 mesh 를 출력함
e.stopPropagation() 을 통해 버블링 방지하여 해결

간단한 클릭 이벤트의 경우 RayCaster 사용 안하고 onClick 만으로 구현 가능

import { useAnimations, useGLTF } from "@react-three/drei";
import React, { useEffect, useRef, useState } from "react";

export default function GLBModel() {
  const { scene, animations } = useGLTF("/dancer.glb");
  const ref = useRef(null);
  const [currentAnimation, setCurrentAnimation] = useState("wave");
  const { actions } = useAnimations(animations, ref);

  useEffect(() => {
    scene.traverse((obj) => {
      if (obj.isMesh) {
        obj.castShadow = true;
        obj.receiveShadow = true;
      }
    });
  }, []);
  
  useEffect(() => {
    actions[currentAnimation]?.fadeIn(0.5).play();
    return () => {
     actions[currentAnimation]?.fadeOut(0.5).stop();
    };
  }, [actions, currentAnimation]);

  return (
    <primitive
      ref={ref}
      onClick={() => {
        setCurrentAnimation((prev) => {
          if (prev === "wave") return "windmill";
          return "wave";
        });
      }}
      onPointerUp={() => {}}
      onPointerDown={() => {}}
      scale={0.01}
      object={scene}
      position-y={0.8}
    />
  );
}