skills.rest
Uniquecrete
UniquecreteCOMMUNITY
Explore all skills by this author →
GitHub

threejs-interaction

Convert mouse and touch events into Three.js raycasting hits.

Updated May 6, 2026
Search Tags:#threejs#camera controls#orbitcontrols#raycasting#mouse input#object selection#touch support
One-click install
npx skills add https://github.com/Uniquecrete/ThinkFasterv1 --skill threejs-interaction-uniquecrete
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-interaction
Source: https://github.com/Uniquecrete/ThinkFasterv1/tree/main/Skills/threejs-interaction
Command: npx skills add https://github.com/Uniquecrete/ThinkFasterv1 --skill threejs-interaction-uniquecrete

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of converting mouse or touch input into accurate, interactive behavior in a Three.js scene (clicks, hovers, selection, and UI placement).

Core Features & Use Cases

  • Raycasting for object interaction: Detect which 3D object a user points at by converting screen coordinates to normalized device coordinates and intersecting rays with scene objects.
  • Camera controls for user navigation: Add orbit, fly, first-person, pointer-lock, trackball, or map-style controls and keep them responsive in the animation loop.
  • Selection & interaction patterns: Implement click-to-select, hover highlighting, box selection, drag interactions, and keyboard input patterns for gameplay-like behavior.
  • World/screen coordinate utilities: Convert between world positions and screen coordinates for overlays such as HTML labels, and compute ray-plane intersections for grounded placement.

Quick Start

Use this skill to implement raycasting-based click detection and camera orbit controls in your Three.js app.

Frequently Asked Questions about threejs-interaction

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I detect which 3D object a user clicks in Three.js?▼

To detect clicks, convert mouse coordinates to normalized device coordinates and use a Raycaster to intersect rays with scene objects. This identifies the exact 3D object a user points at for selection.

How do I add orbit controls and keep them responsive in a Three.js render loop?▼

You add orbit controls and update them inside the animation loop to keep camera navigation responsive. This ensures user input translates to smooth scene movement during continuous rendering.

Does Three.js raycasting support touch events for mobile interaction?▼

Yes, raycasting supports touch events by translating touch input into normalized device coordinates. This allows mobile users to interact with 3D objects through taps and gestures.

What is the best way to sync HTML overlays with 3D positions in Three.js?▼

The best way to sync HTML overlays is converting world positions to screen coordinates. This calculates the 2D projection of 3D objects, allowing labels to accurately follow scene elements.

Can I filter raycasting hits to specific objects or layers in Three.js?▼

Yes, you can filter raycasting hits by checking intersections against object subsets or utilizing layers. This prevents unwanted selections and optimizes hit detection for specific scene elements.

How do I implement drag interactions and box selection in Three.js?▼

You implement drag interactions and box selection by tracking pointer movement and computing ray intersections. This captures continuous input to manipulate objects or define selection boundaries.

Related Skills

Explore More Software Engineering Skills→
CarlosQ96CarlosQ96

threejs-interaction

Implement raycasting, click detection, and camera controls in Three.js applications.

Community
Intermediate
dcl-regenesislabsdcl-regenesislabs

add-interactivity

Add click handlers, hover effects, and raycasting to Decentraland scene entities.

Official
Intermediate
NebulavenusNebulavenus
36

forge-camera-and-input

Enable real-time first-person camera control in a 3D SDL3 GPU scene.

Community
Advanced
ElementTechElementTech
2

threejs-interaction

Handle user input in Three.js scenes with raycasting and OrbitControls.

Community
Intermediate