skills.rest
norrbacka
norrbackaCOMMUNITY
Explore all skills by this author →
𝕏@jnorrbackaGitHub

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
One-click install
npx skills add https://github.com/norrbacka/threejs_codex_base --skill threejs-interaction-norrbacka
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
DexploarerDexploarer
6

threejs-scene-builder

Build Three.js scenes with camera, renderer, controls, and lighting.

Community
Advanced
gamekit-agentgamekit-agent
64

Scene Awareness

Capture and verify Unity scene states before and after modifications.

Official
Advanced
freshtechbrofreshtechbro
682

babylonjs-engine

Create and manipulate 3D scenes in web browsers using Babylon.js.

Community
Advanced
locdinh209locdinh209

3d-web-experience

Guide 3D web experience creation with Three.js, React Three Fiber, and WebGL optimization.

Community
Advanced