skills.rest
mooch10
mooch10COMMUNITY
Explore all skills by this author →
GitHub

threejs-interaction

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

1|Updated Aug 28, 2026
Search Tags:#webgl#three.js#camera controls#orbitcontrols#raycasting#3d interaction#object selection
One-click install
npx skills add https://github.com/mooch10/mochiptos --skill threejs-interaction-mooch10
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-interaction
Source: https://github.com/mooch10/mochiptos/tree/main/frontend/.agents/threejs-interaction
Command: npx skills add https://github.com/mooch10/mochiptos --skill threejs-interaction-mooch10

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, layer filtering, and throttled raycasts for performance. - Camera Controls: Configure OrbitControls, FlyControls, FirstPersonControls, PointerLockControls, TrackballControls, and MapControls with damping, zoom limits, and rotation constraints. - Object Manipulation: Attach TransformControls gizmos and DragControls to move, rotate, and scale meshes, plus box selection via SelectionBox and SelectionHelper. - Use Case: You are building a 3D product configurator where users click parts of a model to customize them. Use this Skill to implement click detection with visual hover feedback and orbit camera navigation. ## Quick Start Add click detection and orbit controls to my Three.js scene so users can select meshes and rotate the camera.

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] coordinates and converting them the same way as mouse positions. Attach a touchstart listener to the renderer canvas and call preventDefault to avoid scrolling conflicts.

OrbitControls vs PointerLockControls, which should I use?▼

OrbitControls rotates the camera around a target point and suits model viewers and editors. PointerLockControls hides the cursor for first-person navigation and suits games or walkthrough experiences.

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 a list of clickable objects, and use layers or 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
HouseGarofaloHouseGarofalo
3

animation-motion

Create UI animations and micro-interactions with Framer Motion and CSS.

Official
Intermediate
OpenAEC-FoundationOpenAEC-Foundation
17

thatopen-impl-highlighting

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

Official
Advanced
utsavm81098utsavm81098

r3f-interaction

Implement pointer events and orbit controls in React Three Fiber scenes.

Community
Intermediate