threejs-interaction

Build Three.js interaction systems for picking, dragging, camera control, and pointer input.

Updated Apr 3, 2026

Search Tags:#touch controls #three.js #selection #camera controls #raycasting #dragging #pointer input

Ready to run

npx skills add https://github.com/norrbacka/threejs_codex_base --skill threejs-interaction-norrbacka

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-interaction
Source: https://github.com/norrbacka/threejs_codex_base/tree/main/.codex/skills/threejs-interaction
Command: npx skills add https://github.com/norrbacka/threejs_codex_base --skill threejs-interaction-norrbacka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the guesswork from implementing user interaction in Three.js scenes, making it easier to connect pointer, touch, and keyboard input to objects, cameras, and scene state.

Core Features & Use Cases

Object Picking and Selection: Use raycasting to detect clicks, hover states, and targeted object selection.
Camera and Navigation Controls: Wire Orbit, Fly, First Person, Pointer Lock, Trackball, and Map controls into a scene.
Direct Manipulation and UI Flows: Add drag handles, transform gizmos, box selection, coordinate conversion, and keyboard-driven movement for interactive 3D tools and games.

Quick Start

Use the threejs-interaction skill to add raycast-based selection, drag behavior, and camera controls to my Three.js scene.

Frequently Asked Questions about threejs-interaction

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

FAQPage Schema

How do I add mouse and touch object selection to a three.js scene?▼

Object selection in a three.js scene is implemented using raycasting to detect pointer intersections. This handles click and hover states by casting a ray from the camera through the pointer coordinates to find targeted meshes.

What is the best way to implement dragging and transform gizmos in three.js?▼

Dragging and transform gizmos in three.js require direct manipulation patterns that convert pointer input into 3D coordinate changes. This connects drag handles to scene objects, enabling interactive movement and transformation workflows.

How do I wire Orbit and Fly camera controls for three.js pointer input?▼

Camera controls for three.js pointer input are wired by connecting input events to navigation systems like Orbit, Fly, First Person, Trackball, and Map controls. This links camera movement directly to mouse and touch interactions.

Can I use box selection and keyboard-driven controls together in three.js?▼

Yes, box selection and keyboard-driven controls can be integrated together in three.js. This combines pointer-based area selection with keyboard input to drive 3D UI workflows and object manipulation within the scene.

Does this three.js interaction approach work with existing stacks and specific versions?▼

Yes, the interaction patterns respect the project's existing three.js stack and version. Coordinate conversion, control wiring, and event handling are designed to integrate without breaking current scene implementations.