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

Find a file

Kumi 8fdf7fa138 feat: support aframe 1.5.0 and update docs This release brings the project up to date with aframe 1.5.0, ensuring compatibility and leveraging the latest features of aframe. Alongside this, the README.md has been updated to provide clearer usage instructions, enhancing the user experience. Additionally, a significant cleanup was done by removing numerous dev dependencies, which will necessitate replacements for future development. These changes aim to streamline the development process while maintaining the functionality and usability of the aframe-click-drag-component. - Support for aframe 1.5.0 ensures compatibility with the latest version, bringing new features and improvements to users. - Updated README.md with clearer instructions improves the ease of use and approachability for new users. - Removed dev dependencies to tidy up the project structure, highlighting a shift towards a more streamlined and focused development process.		2024-03-28 07:18:47 +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	feat: support aframe 1.5.0 and update docs	2024-03-28 07:18:47 +01:00
LICENSE	Click + Drag component	2016-09-23 19:03:49 +10:00
package.json	feat: support aframe 1.5.0 and update docs	2024-03-28 07:18:47 +01:00
README.md	feat: update A-Frame version and drag component	2024-03-28 07:05:24 +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/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>

npm

Install via npm:

npm install @kumitterer/aframe-click-drag-component

Then register and use.

import aframe from "aframe";
import registerClickDrag from "@kumitterer/aframe-click-drag-component";
registerClickDrag(aframe);