102.3K+Download
Skip to the usage guide
Three.js Interactionby CloudAI-X

Three.js Interaction Skill.

Connect a gesture to the intended 3D object using the canvas and camera's actual coordinates.

  • 3D
  • Three.js
Download OpenDesignView Usage Guide
Source Review · Three.js InteractionSKILL.md
Task 3D Produces • Canvas-relative object picking • A suitable camera-control configuration • Selection, hover, drag, or transform behavior Before You Start A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.
Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Three.js Interaction: Pick and Manipulate Objects

Ray-based picking, coordinate conversion, camera controls, selection, and object manipulation.

Source-based workflowNot an execution benchmark

The Working Approach

Three.js Interaction covers raycasting and controls. It explains how screen input becomes a camera ray, how intersections identify objects or instances, and why an embedded canvas needs its own coordinate conversion rather than full-window assumptions.

Camera navigation and object manipulation are separate jobs. Orbit, fly, map, drag, and transform controls have different roles. An editor-like scene needs to coordinate those handlers so dragging a model does not also rotate the camera.

Expected Deliverables

  • Canvas-relative object picking
  • A suitable camera-control configuration
  • Selection, hover, drag, or transform behavior
See the Example Brief

From Brief to Review

  1. 01
    Define Targets

    List selectable objects and decide whether nested meshes or instances are separate targets.

  2. 02
    Map Input

    Normalize pointer positions against the canvas rectangle and raycast through the active camera.

  3. 03
    Coordinate Controls

    Manage navigation conflicts during manipulation and restore feedback when selection changes.

02 When to Use It

When to Use It

A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.

A Good Fit

  • Product ConfiguratorsSelect a product part and highlight or act on that specific object.
  • Scene EditorsUse transform or drag controls for moving, rotating, and scaling selected geometry.

Limits to Check

  • Accessibility Is SeparatePointer examples alone do not establish keyboard or assistive-technology access.
  • Lifecycle Needs ReviewVerify controls APIs and clean up event handlers in the actual application.

Bring These Inputs

  • Scene HierarchyIdentify selectable meshes and instances.
  • Canvas PlacementProvide the real embedded view and active camera.
  • Input BehaviorSpecify navigation, manipulation, touch, and alternative controls.

03 Decisions That Matter

Decisions That Matter

  1. Accurate Normalization

    Canvas-relative coordinates prevent picking from drifting inside a page layout.

  2. Interaction Ownership

    Disabling competing controls gives each gesture one clear purpose.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the relevant threejs-skills directory as agent guidance. It is not the Three.js runtime and does not install scene assets.

Upstream Source File
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-interaction/SKILL.md

A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use threejs-interaction to add selection to this embedded product viewer. Raycast only the listed parts using canvas-relative coordinates. Highlight the selected part and prevent orbit controls from fighting object dragging. Describe a keyboard alternative separately.

Inspect the Result

Check the actual output against these observable criteria.

  • Picking stays accurate after layout changes.
  • Dragging does not orbit the camera.
  • Old highlights and listeners are handled explicitly.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
CloudAI-X
Repository
CloudAI-X/threejs-skills
Skill File
skills/threejs-interaction/SKILL.md
License
Not confirmed — review the upstream terms before reuse.
Reviewed Snapshot
2026-10-07 · b1c623076c66
Editorial Source Summary
Ray-based picking, coordinate conversion, camera controls, selection, and object manipulation.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Can it distinguish instances?

The documented intersection result includes instanceId for InstancedMesh.

Why can clicks miss an embedded canvas?

One possible cause is using window dimensions instead of the canvas rectangle.

Does it only cover orbit navigation?

No. It discusses several camera-control models plus object dragging and transforms.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-interaction/SKILL.md