jesstelford / aframe-click-drag-component Goto Github PK

View Code? Open in Web Editor NEW

103.0 7.0 49.0 2.59 MB

Aframe Click & Drag Component

Home Page: https://jesstelford.github.io/aframe-click-drag-component/

License: MIT License

JavaScript 100.00%

aframe-click-drag-component's Introduction

Looking for maintainers

I have recently started a new business, which means I no longer have time to maintain this project.

Please reach out 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.

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

aframe-click-drag-component's People

Contributors

Stargazers

Watchers

Forkers

solitaire2015 thedrgray demo3d daleyarborough fmipsylone djjanse lennerd otacon717 pubaayaam patrickocoffeyo artemistint israellaguan igoog elenarovani mark0308 luke3butler haboigenzahn dev-blue viperphase1 toseben shinnoki ucfopen jafetmorales indigos33k3r ks1505 yucolabkenchan predrag56 marshallswain zonesound jwebking ayyoalee duktape cadboxx-eu brunomarinho jonathanar lambertbrady andrewhm82 orbix360 qinkai-max cjac35 panboren diarmidmackenzie vfasteng frontenda jirochanf kumitterer

aframe-click-drag-component's Issues

ondrag event or other event

hi there,

Is there such ondrag event i can use?
for example, I know that AFRAME provided event for object such on click event.

Please provide more example of API usage. I find this library is useful.

Thanks and regards,
Fuji

Will it support mobile uses?

Great project! I wanted to see if it is possible to implement the drag control into mobile uses.
However it didn't work as I was expected.
Will there be any plans on supporting mobile usage?

starts dragging even entity is overlapped by other html element.

It starts dragging the entity even if the entity is overlapped by some other HTML element which is fundamentally wrong.

Store position

Hi,

Great component.

I'm trying to store the new position, for some reason whenever I reapply the data the entity is always in a slightly different position, usually a bit closer or further away.

I've tried

hotspot.config.position = el.getAttribute('position')
hotspot.config.position = el.object3D.localToWorld(new three.Vector3(newPos.x,newPos.y,newPos.z))
hotspot.config.position = el.object3D.localToWorld(new three.Vector3(e.detail.offset.x,e.detail.offset.y,e.detail.offset.z))

All in the on dragend event.

When the entity get's re added to the scene it's slightly moved.

Is there anything in the component that means it's position when ending the drag isn't it's real position!?

a-scene Object stick to cursor

If we try to drag the object very fast, the object sticks to a cursor and generally we have to refresh the browser to get rid of it.

Not working in embedded a-scene

Support for eventhandlers

Hi jesstelford

I wanted to know if there was a way i could capture events on dragging, directly using jquery ?

Something like ('#cylinderDraggable').on('dragstart',function(offset,depth,clientX,clientY){
/*

do Something
*/
});

THREE.Vector3: .applyProjection() has been removed. Use .applyMatrix4( m ) instead.

Not able to click and drag an entity made up of other entities

@jesstelford @ngokevin I have created a dice entity from six plane entities. However, when I click and drag the dice entity, instead of moving that dice, only one sided face gets dragged.
This can be tried hands on at link http://shrouded-chamber-73425.herokuapp.com/

how to register drag-drop component on dynamically generated a-frame elements

I have a situation where i am appending elements using jquery to a-scene with click-drag component to the element. but after appending it doesn't fire any event on drag or drop or click.
Please help

No longer compatible with aframe newer version

how to change width and height of the aframe with using this component, style={{width, height}} not working.

use without webpack?

is it possible to use this component with plain javascript?

the example from readme "Browser" does not work in chromium 53:

exports is not defined

Please let me know how to use it.
Thanks and regards,
Quais Husain

AR compatibility

Hi,
is it possible to use this lib in AR?

Thanks

jesstelford / aframe-click-drag-component Goto Github PK

aframe-click-drag-component's Introduction

Looking for maintainers

aframe-click-drag-component

Events

Applying click-drag conditionally

Installation

Browser

npm

aframe-click-drag-component's People

Contributors

Stargazers

Watchers

Forkers

aframe-click-drag-component's Issues

Recommend Projects

Recommend Topics

Recommend Org