A Click & Drag component for A-Frame.
Entities with the click-drag component can be click and dragged around the 3D
scene. Even works whle the camera is moving or rotating!
dragstart
Emitted with the following info:
offset: {x, y, z}- The offset from entity center to drag position.depth- the perpendicular distance from the screen to align the entity while draggingclientX- the mouse event'sclientXvalueclientY- the mouse event'sclientYvalue
dragmove
Emitted with the following info:
nextPosition: {x, y, z}- The next world position of the entity.clientX- the mouse event'sclientXvalueclientY- the mouse event'sclientYvalue
dragend
Emitted with the following info:
offset: {x, y, z}- The offset from entity center to drag position.velocity: {x, y, z}- The smoothed velocity of the entity at dragend time.depth- the perpendicular distance from the screen to align the entity while draggingclientX- the final mouse event'sclientXvalueclientY- the final mouse event'sclientYvalue
Use directly from the unpkg CDN:
<head>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-click-drag-component"></script>
<script>
registerAframeClickDragComponent(window.AFRAME);
</script>
</head>
<body>
<a-scene>
<a-sphere click-drag position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-camera look-controls-enabled="false"></a-camera>
</a-scene>
</body>Install via npm:
npm install aframe-click-drag-componentThen register and use.
import aframe from 'aframe';
import registerClickDrag from 'aframe-click-drag-component';
registerClickDrag(aframe);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent