360 Secure SkillHub
360 安全技能中心

threejs-interaction

面向 Three.js 项目的交互实现指导,涵盖指针拾取坐标换算、点击与拖拽区分、轨道控制与对象拖拽协调、选择状态管理、HTML 控件同步,以及事件清理和边界验证;依赖项目已安装版本,并建议查阅官方文档或源码确认 API 细节。

cesartevisual
热度 0.00
最近更新 2026-10-19 06:48:00
分类:开发依赖:纯提示词应用场景:代码生成

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add cesartevisual/threejs-skills/threejs-interaction
Metadata
name
threejs-interaction
description
Implement Three.js pointer picking, orbit controls, object dragging, selection, and synchronized HTML controls.

Picking and Controls

Use the project's installed versions and existing architecture. These instructions supplement the user's task; they do not authorize unrelated changes or external actions.

Choose controls based on the task and preserve ordinary page scrolling outside the interactive area. Define pointer, touch, keyboard, and HTML equivalents for important actions. Keep selection in application state keyed by stable IDs rather than temporary mesh indices alone.

Convert client coordinates using the actual event viewport rectangle: x = 2 * (clientX - left) / width - 1; y = 1 - 2 * (clientY - top) / height. For scissored views use that view's rectangle. Ignore zero-sized views. Raycast only relevant roots/layers and account for descendants, instance IDs, and front/back-face behavior.

Distinguish a click from a drag using travel thresholds. Use pointer capture when dragging beyond the canvas; handle pointercancel and lost capture. Temporarily suspend orbit controls while object manipulation owns the gesture, then restore them on every exit path.

For drag planes and transform gizmos, convert world results into the object's parent space. Scale constraints and hit tolerances to the use case. Visible shader deformation may not match CPU raycasting; use proxy geometry or another picking method when needed.

Throttle expensive hover work to rendered frames, reuse allocations, and dispose controls/listeners. Verify an offset canvas, touch cancellation, nested transforms, occlusion, keyboard selection, and selecting an instance after list updates.

API reference

Consult the official documentation for exact signatures and revision-specific behavior. If documentation access is unavailable, inspect installed types/source and state any remaining uncertainty.