skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

threejs-interaction

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

1|Updated Aug 20, 2023
Search Tags:#webgl#three.js#camera controls#orbitcontrols#raycasting#3d interaction#click detection
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-interaction-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-interaction
Source: https://github.com/imanlangaran/mini-projects/tree/main/building-sell/.claude/skills/threejs-interaction
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-interaction-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Building interactive 3D experiences 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 and efficient intersection filtering. - Camera Controls: Configure OrbitControls, FlyControls, FirstPersonControls, PointerLockControls, TrackballControls, and MapControls with damping, limits, and auto-rotation. - Object Manipulation: Attach TransformControls gizmos and DragControls to move, rotate, and scale meshes, plus click/box selection systems. - Use Case: You are building a product configurator where users click parts of a 3D model to customize them. Use this Skill to set up click detection with visual selection feedback and orbit camera controls. ## Quick Start Add click detection and orbit controls to my Three.js scene so users can select and inspect 3D 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 (-1 to 1). Call intersectObjects on your clickable meshes and check the returned array for hits, ordered by distance.

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 = true and call controls.update() each frame for smooth movement.

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

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

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

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

How do I convert 3D world position to screen coordinates in Three.js?▼

Clone the position vector and call vector.project(camera), which returns normalized device coordinates. Map x and y to pixel values using ((x + 1) / 2) * width and (-(y - 1) / 2) * height to position HTML overlays.

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
MCERQUAMCERQUA
1

threejs-materials

Create PBR, basic, phong, and custom shader materials for Three.js meshes.

Community
Advanced
openaiopenai
5.3k

game-ui-frontend

Design HUDs, menus, and overlays for browser games that protect the playfield.

Official
Intermediate