Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jesstelford/aframe-click-drag-component
Aframe Click & Drag Component
https://github.com/jesstelford/aframe-click-drag-component
Last synced: 2 days ago
JSON representation
Aframe Click & Drag Component
- Host: GitHub
- URL: https://github.com/jesstelford/aframe-click-drag-component
- Owner: jesstelford
- License: mit
- Created: 2016-09-11T03:04:34.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-06-10T00:00:29.000Z (over 2 years ago)
- Last Synced: 2025-01-02T11:08:40.543Z (9 days ago)
- Language: JavaScript
- Homepage: https://jesstelford.github.io/aframe-click-drag-component/
- Size: 2.53 MB
- Stars: 106
- Watchers: 7
- Forks: 48
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- vr-resources - A-Frame click & drag component
README
# Looking for maintainers
I have recently [started a new business](https://mobile.twitter.com/ceteio), which means I no longer have time to maintain this project.
Please [reach out](https://github.com/jesstelford) if you are interested in updating this component to the latest versions of aframe, merging the pending PRs, and resolving the list of issues ❤️
# aframe-click-drag-component
A Click & Drag component for [A-Frame](https://aframe.io).
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:
```javascript
...
...
```
### Installation
#### Browser
Use directly from the unpkg CDN:
```html
registerAframeClickDragComponent(window.AFRAME);
```
#### npm
Install via npm:
```bash
npm install aframe-click-drag-component
```
Then register and use.
```javascript
import aframe from 'aframe';
import registerClickDrag from 'aframe-click-drag-component';
registerClickDrag(aframe);
```