skills.rest
kodingvibes
kodingvibesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

threejs-interaction

Implements raycasting, camera controls, and mouse/touch input handling for interactive Three.js scenes.

2|10|Updated Jul 28, 2026
Search Tags:#webgl#three.js#camera controls#raycasting#mouse input#3d interaction#object selection
One-click install
npx skills add https://github.com/kodingvibes/gamejam-2026 --skill threejs-interaction-kodingvibes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-interaction
Source: https://github.com/kodingvibes/gamejam-2026/tree/main/participantes/madkoding/.agents/skills/threejs-interaction
Command: npx skills add https://github.com/kodingvibes/gamejam-2026 --skill threejs-interaction-kodingvibes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Building interactive 3D experiences in Three.js requires wiring together raycasting, camera controls, and input events, which involves repetitive boilerplate and subtle coordinate-conversion math that is easy to get wrong. ## Core Features & Use Cases - Raycasting & Picking: Detect clicks, hovers, and touches on 3D objects with mouse-to-NDC coordinate conversion, touch support, and performance throttling. - Camera Controls: Configure OrbitControls, FlyControls, FirstPersonControls, PointerLockControls, TrackballControls, and MapControls with damping, limits, and auto-rotation. - Object Manipulation: Use TransformControls and DragControls gizmos, click-to-select and box-selection systems, and world-to-screen coordinate conversion for HTML overlays. - Use Case: You are building a 3D product configurator where users orbit the camera, click parts to highlight them, and drag objects along the ground plane. This Skill provides the complete interaction layer. ## Quick Start Add click detection and orbit camera controls to my Three.js scene so users can select and highlight objects.

Frequently Asked Questions about threejs-interaction

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

FAQPage Schema
How do I detect clicks on 3D objects in Three.js?▼

Use THREE.Raycaster with setFromCamera after converting mouse coordinates to normalized device coordinates. Call intersectObjects on your clickable meshes and read the first entry of the returned intersections array.

How to add orbit camera controls in Three.js?▼

Import OrbitControls from three/addons/controls/OrbitControls.js and instantiate it with your camera and renderer.domElement. Enable damping with controls.enableDamping and call controls.update() each animation frame.

Does Three.js raycasting work with touch input on mobile?▼

Yes, raycasting works with touch events by reading event.touches[0].clientX and clientY and converting them to normalized device coordinates the same way as mouse input. Attach a touchstart listener to the renderer canvas.

OrbitControls vs PointerLockControls in Three.js, which should I use?▼

OrbitControls rotates the camera around a target point and suits viewers and editors. PointerLockControls hides the cursor for first-person navigation and suits games or walkthroughs requiring WASD movement.

Why is my Three.js raycast slow on mousemove?▼

Raycasting every mousemove against the whole scene is expensive. Throttle handlers to around 20fps, restrict intersection checks to specific clickable objects, use layers for filtering, and raycast against simpler invisible collision meshes.

Related Skills

Explore More Software Engineering Skills→
yonetim258852yonetim258852

threejs-webgl

Build interactive 3D web experiences with Three.js scenes and animations.

Community
Advanced
OmerZeyveliOmerZeyveli
3

dotween

Create and manage DOTween animations in Unity with lifecycle-safe cleanup.

Community
Advanced
OpenAEC-FoundationOpenAEC-Foundation
17

thatopen-impl-highlighting

Enable element highlighting, selection, and outline rendering in a ThatOpen BIM viewer.

Official
Advanced
imanlangaranimanlangaran
1

r3f-interaction

Implements pointer events, camera controls, gestures, and selection in React Three Fiber scenes.

Community
Intermediate