kumi/aframe-click-drag-component
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity
A Click & Drag component for A-Frame. Also on Github: https://github.com/kumitterer/aframe-click-drag-component
58 commits 1 branch 2 tags 169 KiB
JavaScript 100%
Find a file
Kumi 9e139d0de4
feat: transition main module to src/index.js 
Changed the 'main' field in package.json to point to 'src/index.js'
instead of 'lib/index.js'. This update aligns the entry point with the
source code to simplify the development process and ensure that the
latest features and fixes are readily accessible. The build script
remains in place for pre-publication compilation, maintaining
compatibility with environments expecting transpiled code.

This shift encourages direct use of the source module, facilitating
easier debugging and faster iteration during development.
2024-03-27 18:59:26 +01:00
dist Click + Drag component 2016-09-23 19:03:49 +10:00
src refactor(index.js): improve syntax consistency and cleanup 2024-03-27 18:30:26 +01: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 Correct export path 2016-09-30 07:46:29 +10:00
.npmignore Click + Drag component 2016-09-23 19:03:49 +10:00
CHANGELOG.md 3.0.1 2016-12-18 17:10:35 +11:00
LICENSE Click + Drag component 2016-09-23 19:03:49 +10:00
package.json feat: transition main module to src/index.js 2024-03-27 18:59:26 +01:00
README.md feat: fork and update aframe-click-drag-component 2024-03-27 18:33:58 +01:00
rollup.config.js Return smoothed drag end velocity with event 2016-09-28 22:49:19 +10:00
yarn.lock feat: update dependencies to newer versions 2024-03-27 17:15:32 +01:00

README.md

aframe-click-drag-component

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!

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

Applying click-drag conditionally

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>
...

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);