인터렉션

RedGPU는 3D 및 2D 객체에 대한 마우스 및 터치 이벤트를 처리하는 직관적인 피킹(Picking) 시스템을 제공합니다. Mesh, Sprite3D, Sprite2D 등 대부분의 디스플레이 객체는 사용자 입력을 수신하고 반응할 수 있습니다.

1. 이벤트 리스너 등록

객체에 이벤트를 등록하려면 addListener 메서드를 사용합니다. 이벤트가 발생하면 등록된 콜백 함수가 실행되며, 이벤트 정보 객체(e)가 전달됩니다.

import * as RedGPU from "https://redcamel.github.io/RedGPU/dist/index.js";

// 이벤트 타입 상수 참조
const { PICKING_EVENT_TYPE } = RedGPU.Picking;

mesh.addListener(PICKING_EVENT_TYPE.CLICK, (e) => {
    console.log('클릭된 객체:', e.target);
    // 클릭 시 회전
    e.target.rotationY += 45;
});

2. 지원하는 이벤트 타입

RedGPU.Picking.PICKING_EVENT_TYPE 에 정의된 6가지 기본 이벤트를 지원합니다.

이벤트 상수	문자열 값	설명
CLICK	'click'	마우스 클릭 또는 터치 탭 시 발생
DOWN	'down'	마우스 버튼을 누르거나 터치 시작 시 발생
UP	'up'	마우스 버튼을 떼거나 터치 종료 시 발생
OVER	'over'	마우스 커서가 객체 위로 진입할 때 발생 (Hover In)
OUT	'out'	마우스 커서가 객체 밖으로 벗어날 때 발생 (Hover Out)
MOVE	'move'	객체 위에서 마우스 포인터가 이동할 때 지속적으로 발생

3. 실습 예제: 인터렉티브 큐브

마우스 오버 시 크기가 변하고, 클릭 시 색상이 바뀌며, 이동 시 좌표를 확인할 수 있는 인터렉티브 예제입니다.

핵심 요약

• addListener 를 통해 객체별로 독립적인 이벤트 처리가 가능합니다.
• e.target 을 통해 이벤트가 발생한 객체에 직접 접근할 수 있습니다.
• 마우스 커서 스타일 변경(document.body.style.cursor) 등 웹 표준 DOM API와 함께 사용하여 UX를 향상시킬 수 있습니다.

다음 학습 추천

인터렉션까지 더해진 풍성한 장면에 시각적인 완성도를 높여주는 후처리 효과를 적용해 봅니다.

• 포스트 이펙트