skills.rest
Bailipa
BailipaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-core-raycaster

Creates Three.js Raycaster-based mouse picking with InstancedMesh support and layer filtering.

4|Updated Apr 14, 2026
Search Tags:#performance#three.js#layers#instancedmesh#raycaster#intersection#mouse-picking
One-click install
npx skills add https://github.com/Bailipa/EZTor_FULLBLOOD --skill threejs-core-raycaster-bailipa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-core-raycaster
Source: https://github.com/Bailipa/EZTor_FULLBLOOD/tree/main/.opencode/skills/threejs/threejs-core/threejs-core-raycaster
Command: npx skills add https://github.com/Bailipa/EZTor_FULLBLOOD --skill threejs-core-raycaster-bailipa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Three.js scenes require reliable and efficient user interaction: selecting, hovering, and querying objects with the mouse can be expensive and error-prone if every frame scans the whole scene. The Raycaster API provides fast, configurable intersection tests that respect layers and per-type thresholds, enabling smooth, accurate picking.

Core Features & Use Cases

  • Raycaster basics: create a raycaster, setFromCamera, and test intersections against objects or arrays.
  • InstancedMesh support: retrieve instanceId to identify which instance was hit, enabling per-instance interactions.
  • Layer filtering & performance: leverage Layers to limit tests to interactive objects and throttle tests for performance.
  • Common scenarios: click-to-select, hover effects, and ground snapping tests in terrain or UI overlays.

Quick Start

Initialize a THREE.Raycaster, convert mouse coordinates to NDC, call setFromCamera to configure the ray, and run intersectObjects on your interactive set to obtain hits.

Frequently Asked Questions about threejs-core-raycaster

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

FAQPage Schema
How do I implement mouse picking in a Three.js scene?▼

If raycasting returns no intersections, verify your mouse coordinates are correctly converted to NDC and that target objects are enabled on the Raycaster's active Layers. Incorrect layer filtering will prevent valid intersection hits.

Can I use Raycaster to interact with individual instances in an InstancedMesh?▼

Raycaster in Three.js supports InstancedMesh by returning the instanceId in the intersection results. You can use this identifier to apply hover effects or click-to-select interactions to individual instances.

How do I limit raycasting performance costs for hover detection in Three.js?▼

To optimize raycasting performance, use Three.js Layers to filter the intersectObjects test set. Restricting intersection tests to only interactive objects prevents scanning the entire scene every frame.

What is the best way to set up click-to-select interactions using the Three.js Raycaster?▼

To set up Three.js raycasting for click-to-select, initialize a Raycaster, convert mouse coordinates to normalized device coordinates, call setFromCamera to configure the ray, and execute intersectObjects on your interactive set.

Do I need any external dependencies to use raycasting for mouse picking in Three.js?▼

No, you do not need external dependencies for raycasting in Three.js. The built-in Raycaster API handles intersection tests natively, including layer-based filtering and ground snapping tests in terrain.

Why does my Three.js raycaster return empty intersection results on mouse click?▼

If raycasting returns no intersections, verify your mouse coordinates are correctly converted to NDC and that target objects are enabled on the Raycaster's active Layers. Incorrect layer filtering will prevent valid intersection hits.

Related Skills

Explore More Software Engineering Skills→
mmdonohuemmdonohue
1

threejs-interaction

Implement raycasting, OrbitControls, and mouse/touch input in Three.js scenes.

Community
Intermediate
arnaudruffinarnaudruffin

geometry-and-math

Solve 2D geometry and math tasks for Phaser 4 games.

Community
Advanced
UniquecreteUniquecrete

threejs-interaction

Convert mouse and touch events into Three.js raycasting hits.

Community
Advanced
XyrcesXyrces
2

spatial_data_structures

Implement spatial indexing for ECS collision detection and neighborhood queries.

Community
Advanced