1.0.1 • Published 12 months ago
aframe-drag-controls v1.0.1
aframe-drag-controls
A wrapper for THREE.DragControls
.
setup
npm
npm i aframe-drag-controls
import AFRAME from 'aframe';
import 'aframe-drag-controls';
browser
<script src="https://unpkg.com/aframe"></script>
<script src="https://unpkg.com/aframe-drag-controls"></script>
usage
<a-scene>
<a-entity
camera
drag-controls="objects: .draggable"
look-controls
orbit-controls="initialPosition: 0 5 15"
></a-entity>
<a-box
class="draggable"
></a-box>
</a-scene>
let sceneEl = document.querySelector('a-scene');
{
let el = sceneEl.querySelector('[camera]');
el.addEventListener('drag-controls:changed', event => {
event.target.setAttribute('orbit-controls', 'enabled', !event.detail.active);
});
}
{
let onDragStart = (event => {
event.target.setAttribute('color', 'DeepSkyBlue');
});
let onDragEnd = (event => {
event.target.removeAttribute('color');
});
let els = sceneEl.querySelectorAll('a-box.draggable');
for (let el of els) {
el.addEventListener('dragstart', onDragStart);
el.addEventListener('dragend', onDragEnd);
}
}
properties
name | type | default |
---|---|---|
enabled | 'boolean' | true |
objects | 'string' | '*' |
events
name |
---|
drag-controls:changed |