Community코딩 & 개발github.com

cloudai-x/threejs-interaction

Three.js 상호작용 - 레이캐스팅, 컨트롤, 마우스/터치 입력, 객체 선택. 사용자 입력 처리, 클릭 감지 구현, 카메라 컨트롤 추가 또는 대화형 3D 경험 생성 시 사용합니다.

threejs-interaction란 무엇인가요?

이 스킬은 Three.js를 기반으로 한 3D 상호작용을 구현하는 데 특화되어 있습니다. 레이캐스팅(Raycasting)을 통해 마우스나 터치 입력으로 3D 객체를 정확히 선택하고, OrbitControls, DragControls 등 다양한 카메라 및 객체 컨트롤을 제공합니다. 개발자는 이 스킬을 활용하여 클릭 감지, 객체 선택, 드래그 앤 드롭, 호버 효과 등 풍부한 사용자 인터랙션을 손쉽게 추가할 수 있습니다. Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 사용 가능하며, 기존 Three.js 프로젝트에 즉시 적용할 수 있습니다. 주요 기능으로는 raycast 이벤트 처리, 터치 제스처 매핑, 객체 상태 변경 및 피드백 제공 등이 포함되어 있어, 사용자 입력에 반응하는 몰입형 3D 웹 애플리케이션을 빠르게 구축할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cloudai-x/threejs-skills/tree/main/skills/threejs-interaction

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

threejs-interaction은(는) 무엇을 하나요?

Three.js 상호작용 - 레이캐스팅, 컨트롤, 마우스/터치 입력, 객체 선택. 사용자 입력 처리, 클릭 감지 구현, 카메라 컨트롤 추가 또는 대화형 3D 경험 생성 시 사용합니다.

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

cloudai-x/threejs-animation

Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.

cloudai-x/threejs-fundamentals

Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.

cloudai-x/threejs-geometry

Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.

cloudai-x/threejs-lighting

Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.

cloudai-x/threejs-loaders

Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.

cloudai-x/threejs-materials

Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.

cloudai-x/threejs-postprocessing

Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.

cloudai-x/threejs-shaders

Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.

cloudai-x/threejs-textures

Three.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.

관련 스킬