🎯

threejs-interaction

🎯Skill

from cloudai-x/threejs-skills

What it does

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

Overview

A Claude Code skill providing comprehensive Three.js interaction knowledge, covering raycasting, camera controls, mouse and touch input handling, and object selection. It serves as a practical reference for implementing user interaction in 3D scenes, from basic click detection to complex drag-and-drop and hover effects.

Key Features

Raycasting Reference - Complete API coverage for ray-based object detection including mouse picking, arbitrary ray directions, and intersection result properties (distance, point, face, UV coordinates)
OrbitControls Integration - Setup and configuration for camera controls with damping, pan, zoom limits, and auto-rotation
Touch Support - Patterns for handling single-touch, multi-touch, and pinch-to-zoom interactions on mobile devices
Mouse Position Conversion - Utility patterns for converting mouse coordinates to normalized device coordinates, both for full-window and specific canvas elements
Object Selection Patterns - Ready-to-use code for click detection, hover highlighting, and interactive 3D object selection with proper event handling

Who is this for?

This skill is designed for developers building interactive Three.js applications who need accurate references for user input handling. It is particularly useful for those creating 3D product viewers, data visualizations, games, or any web application where users need to click on, hover over, or drag 3D objects.

📦

Same repository

cloudai-x/threejs-skills(10 items)

threejs-interaction

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add cloudai-x/threejs-skills --skill threejs-interaction

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add cloudai-x/threejs-skills --skill threejs-interaction

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/threejs-interaction/SKILL.md

SKILL.md

1,578Installs

1,181

Last UpdatedJan 19, 2026

View on GitHub Back to Skills

More from this repository9

🎯

threejs-animation🎯Skill

Provides Three.js animation API references, patterns, and best practices for creating 3D animations and interactive experiences.

🎯

threejs-fundamentals🎯Skill

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

🎯

threejs-shaders🎯Skill

Provides Three.js shader development patterns including custom WebGL shaders, GLSL code examples, and advanced rendering effects

🎯

threejs-geometry🎯Skill

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

🎯

threejs-materials🎯Skill

Provides Three.js material system patterns including PBR materials, textures, normal maps, environment mapping, and advanced rendering techniques

🎯

threejs-postprocessing🎯Skill

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

🎯

threejs-loaders🎯Skill

Provides Three.js asset loading patterns for 3D models, textures, and animations using GLTF, OBJ, FBX, and other format loaders

🎯

threejs-lighting🎯Skill

Provides Three.js lighting patterns including light types, shadows, intensity controls, and techniques for realistic 3D scene illumination

🎯

threejs-textures🎯Skill

Provides Three.js texture patterns including texture loading, UV mapping, mipmaps, filtering, and texture animation techniques