A Click & Drag component for A-Frame. This is a fork of the original aframe-click-drag-component to make it work in current versions of A-Frame (tested with 1.5.0).
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 dragging -
clientX- the mouse event'sclientXvalue -
clientY- 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'sclientXvalue -
clientY- 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 dragging -
clientX- the final mouse event'sclientXvalue -
clientY- the final mouse event'sclientYvalue
You can conditionally apply click-drag behaviors by specifying an enabled
attribute in your click-drag property:
...
<a-sphere click-drag="enabled: false" position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
...Use directly from the unpkg CDN:
<head>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/@kumitterer/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 @kumitterer/aframe-click-drag-componentThen register and use.
import aframe from "aframe";
import registerClickDrag from "@kumitterer/aframe-click-drag-component";
registerClickDrag(aframe);