Three.js Interaction작성자 CloudAI-X캔버스와 카메라의 실제 좌표를 사용해 제스처를 의도한 3D 객체에 연결합니다.
01 기능 소개
레이 기반 피킹, 좌표 변환, 카메라 컨트롤, 선택, 객체 조작을 다룹니다.
Three.js Interaction은 레이캐스팅과 컨트롤을 다룹니다. 화면 입력이 카메라 레이가 되는 과정, 교차 결과로 객체나 인스턴스를 식별하는 방법, 임베드된 캔버스에서 전체 창 기준 가정 대신 별도의 좌표 변환이 필요한 이유를 설명합니다.
카메라 탐색과 객체 조작은 별개의 작업입니다. 오빗, 플라이, 맵, 드래그, 변형 컨트롤은 역할이 서로 다릅니다. 에디터형 씬에서는 모델을 드래그할 때 카메라가 함께 회전하지 않도록 이러한 핸들러를 조율해야 합니다.
예상 결과물
선택 가능한 객체를 나열하고, 중첩된 메시나 인스턴스를 별도 대상으로 둘지 결정합니다.
포인터 위치를 캔버스 사각형 기준으로 정규화하고 활성 카메라를 통해 레이캐스트합니다.
조작 중 탐색 충돌을 관리하고 선택이 바뀔 때 피드백을 복원합니다.
02 활용 상황
동작하는 Three.js 프로젝트와 렌더러가 필요하며, 소스 예제는 설치된 릴리스에 맞게 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.
03 핵심 결정
캔버스 기준 좌표를 사용하면 페이지 레이아웃 안에서 피킹이 어긋나는 것을 막을 수 있습니다.
충돌하는 컨트롤을 비활성화하면 각 제스처의 목적이 하나로 분명해집니다.
04 예시 브리프
아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.
관련 threejs-skills 디렉터리를 에이전트 가이드로 사용하세요. 이는 Three.js 런타임이 아니며 씬 에셋을 설치하지 않습니다.
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-interaction/SKILL.md동작하는 Three.js 프로젝트와 렌더러가 필요하며, 소스 예제는 설치된 릴리스에 맞게 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.
스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.
threejs-interaction를 사용해 이 임베드형 제품 뷰어에 선택 기능을 추가하세요. 나열된 부품만 캔버스 기준 좌표로 레이캐스트하세요. 선택된 부품을 강조하고, 오빗 컨트롤이 객체 드래그와 충돌하지 않게 하세요. 키보드 대안은 별도로 설명하세요.실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.
OpenDesign은 코딩 에이전트를 위한 로컬 디자인 워크스페이스를 제공합니다. 이 목록은 스킬이 번들로 포함되어 있다거나 외부 도구, 자격 증명, 소프트웨어 종속성이 포함되어 있다는 뜻이 아닙니다.
05 출처 및 라이선스
이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.
b1c623076c66레이 기반 피킹, 좌표 변환, 카메라 컨트롤, 선택, 객체 조작을 다룹니다.
링크된 소스를 바탕으로 OpenDesign이 직접 작성한 요약입니다. 저장소 스타는 특정 시점의 인기 지표이며 스킬 사용량이나 품질 점수가 아닙니다.
06 시작 전 질문
OpenDesign
브리프, 소스 자료, 디자인 작업을 로컬 워크스페이스에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-interaction/SKILL.md