Synaptic SkillsSynapticSkills
MarketplaceSkill GraphCriar SkillMCP ServerPlataformaEnterprise
v0.1.0-beta
Voltar ao Marketplace
DevelopmentMédio

React Three Fiber Interaction

porenzed·enzed· v1.0.0 · atualizado em 2026-04-10
79
Score

React Three Fiber interaction - pointer events, controls, gestures, selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.

reactthreejsreact-three-fiber3d-interactionpointer-eventscamera-controlsuser-input
0Stars
0Forks
0Usos
Fork

Documento do Skill

SKILL.mdr3f-interaction/workflow
1
Set up React Three Fiber: — Create a Canvas component to render the 3D scene.
2
Add interactive meshes: — Define mesh components with event handlers for pointer events (onClick, onPointerOver, etc.).
3
Implement event handling: — Within the event handlers, access event properties (point, distance, object) and update the scene accordingly.
4
Incorporate camera controls: — Add OrbitControls, MapControls, or other control components from `@react-three/drei`.
5
Implement transform controls: — Use TransformControls or PivotControls to enable object manipulation.
6
Add drag and drop: — Use `useDrag` from `@use-gesture/react` or DragControls from `@react-three/drei` for draggable objects.
7
Implement keyboard controls: — Use KeyboardControls from `@react-three/drei` to map keyboard inputs to scene actions.

Telemetria de Agentes

Execuções
0
total
Taxa de Sucesso
0%
últimos 30d
Latência Média
0.0s
p50
Alucinação
0.0%
detecção
Tokens Entrada
0
avg 0/exec
Tokens Saída
0
avg 0/exec

Uso por Plataforma

Skills Relacionados

Similar aTailwind CSS Advanced Layout Techniques
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
80
Similar aTailwind CSS Development Patterns
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
79
Similar aTypeScript + React 19 Code Review Expert
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
80

Árvore do Skill

React Three Fiber Interaction
r3f-interaction
Fases Cognitivas5
1.SENSE
2.CONTEXTUALIZE
3.RECOMMEND
4.ACT
5.REFLECT
Triggers7
add interaction to a 3d object in react three fiberimplement click detection in r3fadd camera controls to a threejs scenehandle user input in a react three fiber applicationcreate an interactive 3d experience with r3fenable object dragging in react three fiberimplement keyboard controls in a 3d scene

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%
🤖Sucesso de Agentes0%
🕐Atualidade100%
🔗Saúde de Dependências100%
🕸️Centralidade no Grafo0%
🛡️Segurança50%
CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download r3f-interaction
$ synaptic skills detail r3f-interaction
$ synaptic skills live r3f-interaction

Dependências

@react-three/fiber@react-three/drei@use-gesture/react@react-spring/three

Links

GitHub Repository