PlugWiki

threejs-interaction Skill for Claude Code: Picking, Controls and Drag in three.js

threejs-interaction makes Claude write up-to-date three.js code for clicks, hover, camera controls, drag and selection.

Installs
15.9K
on skills.sh
Stars
3.9K
on GitHub
Updated
Oct 2026
last repo commit

threejs-interaction is one of 13 three.js skills from CloudAI-X. It targets three.js r186 and gives Claude current code for picking objects with a raycaster, camera controls, transform gizmos, dragging, hover and box selection. The same code runs under WebGL and WebGPU.

It loads when you handle mouse, touch or keyboard input, detect clicks on 3D objects or add camera controls. The SKILL.md has a quick start, sections for each controls class, and a Common Mistakes list that maps outdated calls to the r186 fix, such as Clock to Timer and the removed getObject().

It is a text skill with a single file. Its See Also section points to sibling three.js skills for setup, animation, loaders, postprocessing and React Three Fiber.

Good for

  • Web developers adding mouse, touch or keyboard input to a three.js scene
  • Developers whose Claude keeps writing outdated three.js code
  • Creative coders building 3D editors with gizmos and selection

Install threejs-interaction

Claude Code

  1. 1

    Copy this prompt.

    Install the threejs-interaction skill in Claude Code. Run this command:

npx skills add https://github.com/cloudai-x/threejs-skills --skill threejs-interaction

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Picking with raycasting, camera controls, transform gizmos, drag, hover and box selection for three.js, identical under WebGL and WebGPU. Use when handling mouse, touch or keyboard input, detecting clicks on 3D objects, adding camera controls, or making scene objects interactive.

Sections in SKILL.md

  1. Quick Start
  2. Raycasting
  3. What an intersection contains
  4. Raycaster configuration
  5. Dragging on a plane
  6. Camera Controls
  7. OrbitControls
  8. FlyControls
  9. FirstPersonControls
  10. PointerLockControls
  11. TrackballControls
  12. TransformControls
  13. DragControls
  14. Selection
  15. Box selection
  16. Screen and World Coordinates

Key facts

License
MIT
Author
cloudai-x (repo owner)
Repository
cloudai-x/threejs-skills, folder skills/threejs-interaction
Installs on skills.sh
15,930 as of 2026-11-02
Repo stars
3,903 as of 2026-11-02 (whole repo)
Last repo commit
2026-10-19
Files in the skill folder
1 file including SKILL.md
skills.sh audits
Gen Agent Trust Hub: pass; Socket: pass; Snyk: pass

What it includes

  • A runnable scene with OrbitControls and click picking

    Creates a renderer, camera, mesh, OrbitControls and a Timer, and logs the object under a pointerdown click.

    Quick Start

  • Picking, hit data, layers and dragging on a plane

    What an intersection contains, raycaster configuration (near, far, thresholds, layers) and dragging an object along a ground plane.

    Raycasting

  • OrbitControls, FlyControls, FirstPersonControls, PointerLockControls, TrackballControls

    One section per controls class, all built on the shared Controls base API.

    Camera Controls

  • A gizmo to move, rotate and scale

    Notes that the gizmo must be added to the scene separately.

    TransformControls

  • Drag objects with the pointer

    Covers the r168 API changes: connect(), objects and the raycaster property.

    DragControls

  • Click and box selection

    Selection with a raycaster, and a box selection section.

    Selection

  • Convert between pointer and scene space

    Section on moving between screen and world coordinates.

    Screen and World Coordinates

  • The same input code under WebGPURenderer

    Says Controls and Raycaster are renderer-neutral and shows a WebGPURenderer setup.

    WebGPU and TSL

  • Outdated call to r186 fix, with the reason

    Examples: scene.add(transformControls) becomes getHelper(), the OrbitControls constructor needs the DOM element, Clock gives way to Timer, and Face3 does not exist.

    Common Mistakes

From the official docs

Questions

What does the threejs-interaction skill do?

It gives Claude current three.js code for user input. That covers clicking objects, orbiting the camera, moving objects with gizmos, dragging and box selection.

How do I install it?

Use the install box above. It installs only this skill. The repo README also shows npx skills add cloudai-x/threejs-skills for all 13 skills, and a manual copy into ~/.claude/skills.

Which three.js version does it target?

r186 (three@0.186), according to the SKILL.md and README. It lists changes since older releases, such as Clock giving way to Timer.

Does it work with WebGPU?

Yes. The SKILL.md has a WebGPU and TSL section and says Controls and Raycaster code runs unchanged under WebGPURenderer. Raycaster tests CPU-side geometry, so it does not see shader displacement.

Does it need an API key?

The SKILL.md names no API key and the folder bundles no scripts.

Do I need the other three.js skills?

No. The See Also list names threejs-fundamentals, threejs-animation, threejs-postprocessing, threejs-loaders and threejs-react-three-fiber as related skills. They are optional companions in the same repo.

Is it safe?

It bundles no scripts: the folder is one SKILL.md of reference text and code examples. What matters is the code Claude then writes into your project, so review it as you would any change. Our advice: run it in a branch.

Information

updated Nov 2, 2026

Repository
cloudai-x/threejs-skills
Folder
skills/threejs-interaction

cloudai-x/threejs-skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2
  1. threejs-interaction SKILL.md · github.com
  2. cloudai-x/threejs-skills README · github.com

Updated Nov 2, 2026.