A Click & Drag component for A-Frame. Also on Github: https://github.com/kumitterer/aframe-click-drag-component

Find a file

Jess Telford 4b22f80c8c Allow ghpages build to work		2016-09-28 22:55:54 +10:00
dist	Click + Drag component	2016-09-23 19:03:49 +10:00
examples	Return smoothed drag end velocity with event	2016-09-28 22:49:19 +10:00
src	Return smoothed drag end velocity with event	2016-09-28 22:49:19 +10:00
.eslintignore	Click + Drag component	2016-09-23 19:03:49 +10:00
.eslintrc	Click + Drag component	2016-09-23 19:03:49 +10:00
.gitignore	Click + Drag component	2016-09-23 19:03:49 +10:00
.npmignore	Click + Drag component	2016-09-23 19:03:49 +10:00
LICENSE	Click + Drag component	2016-09-23 19:03:49 +10:00
package.json	Allow ghpages build to work	2016-09-28 22:55:54 +10:00
README.md	Return smoothed drag end velocity with event	2016-09-28 22:49:19 +10:00
rollup.config.js	Return smoothed drag end velocity with event	2016-09-28 22:49:19 +10:00

README.md

aframe-click-drag-component

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!

Note: entities are not positioned correctly when the camera is rotated.

Events

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's clientX value
clientY - the mouse event's clientY value

dragmove

Emitted with the following info:

nextPosition: {x, y, z} - The next world position of the entity.
clientX - the mouse event's clientX value
clientY - the mouse event's clientY value

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's clientX value
clientY - the final mouse event's clientY value

Installation

Browser

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>

npm

Install via npm:

npm install aframe-click-drag-component

Then register and use.

import aframe from 'aframe';
import registerClickDrag from 'aframe-click-drag-component';
registerClickDrag(aframe);