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
62 commits 1 branch 2 tags 169 KiB
JavaScript 100%
Find a file
Kumi 3b87e2178e
feat: update A-Frame version and drag component 
Upgraded to A-Frame 1.5.0 for improved VR features and compatibility,
and switched to a maintained version of the aframe-click-drag-component
to ensure ongoing support and stability.

This update addresses potential compatibility issues with newer VR
environments and provides access to the latest features and fixes from
A-Frame. By moving to a maintained version of the click-drag component,
we ensure that our application stays robust against future changes in
the A-Frame ecosystem.
2024-03-28 07:05:24 +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: update package for A-Frame 1.5.0 2024-03-27 19:47:37 +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);