kumi/aframe-click-drag-component
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity

Remove locktolocalrotation option

Browse source
This commit is contained in:
Jess Telford 2016-11-05 15:55:23 +11:00
parent e0e8c23bea
commit f0902cedd1
2 changed files with 29 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
- Support click and drag for children of entities and the camera - Support click and drag for children of entities and the camera
### Removed
- Removed `lockToLocalRotation` option. It is hard coded to `true` now.
## [1.3.3][] - 2016-11-05 ## [1.3.3][] - 2016-11-05
### Fixed ### Fixed

63
src/index.js
View file

@ -301,7 +301,7 @@ const {selectItem} = (function selectItemFunction() {
}; };
}()); }());
function dragItem(THREE, element, offset, camera, depth, mouseInfo, lockToLocalRotation) { function dragItem(THREE, element, offset, camera, depth, mouseInfo) {
const threeCamera = camera.components.camera.camera; const threeCamera = camera.components.camera.camera;
@ -344,34 +344,31 @@ function dragItem(THREE, element, offset, camera, depth, mouseInfo, lockToLocalR
depth depth
); );
if (lockToLocalRotation) {
let rotationDiff; let rotationDiff;
// Start by rotating backwards from the initial camera rotation // Start by rotating backwards from the initial camera rotation
rotationDiff = rotationQuaternion.copy(startCameraRotationInverse); rotationDiff = rotationQuaternion.copy(startCameraRotationInverse);
// rotate the offset // rotate the offset
offsetVector.set(offset.x, offset.y, offset.z); offsetVector.set(offset.x, offset.y, offset.z);
// Then add the current camera rotation // Then add the current camera rotation
rotationDiff = rotationQuaternion.multiply(threeCamera.getWorldQuaternion()); rotationDiff = rotationQuaternion.multiply(threeCamera.getWorldQuaternion());
offsetVector.applyQuaternion(rotationDiff); offsetVector.applyQuaternion(rotationDiff);
if (!isChildOfActiveCamera) { if (!isChildOfActiveCamera) {
// And correctly offset rotation // And correctly offset rotation
rotationDiff.multiply(startElementRotation); rotationDiff.multiply(startElementRotation);
rotationEuler.setFromQuaternion(rotationDiff, elementRotationOrder);
}
nextRotation.x = THREE.Math.radToDeg(rotationEuler.x);
nextRotation.y = THREE.Math.radToDeg(rotationEuler.y);
nextRotation.z = THREE.Math.radToDeg(rotationEuler.z);
rotationEuler.setFromQuaternion(rotationDiff, elementRotationOrder);
} }
nextRotation.x = THREE.Math.radToDeg(rotationEuler.x);
nextRotation.y = THREE.Math.radToDeg(rotationEuler.y);
nextRotation.z = THREE.Math.radToDeg(rotationEuler.z);
const nextPosition = {x: x - offsetVector.x, y: y - offsetVector.y, z: z - offsetVector.z}; const nextPosition = {x: x - offsetVector.x, y: y - offsetVector.y, z: z - offsetVector.z};
// When the element has parents, we need to convert its new world position // When the element has parents, we need to convert its new world position
@ -393,9 +390,7 @@ function dragItem(THREE, element, offset, camera, depth, mouseInfo, lockToLocalR
element.setAttribute('position', nextPosition); element.setAttribute('position', nextPosition);
if (lockToLocalRotation) { element.setAttribute('rotation', nextRotation);
element.setAttribute('rotation', nextRotation);
}
} }
function onTouchMove({changedTouches: [touchInfo]}) { function onTouchMove({changedTouches: [touchInfo]}) {
@ -430,7 +425,7 @@ const {didMount, didUnmount} = (function getDidMountAndUnmount() {
let removeDragListeners; let removeDragListeners;
const cache = []; const cache = [];
function initialize(THREE, componentName, lockToLocalRotation) { function initialize(THREE, componentName) {
// TODO: Based on a scene from the element passed in? // TODO: Based on a scene from the element passed in?
const scene = document.querySelector('a-scene'); const scene = document.querySelector('a-scene');
@ -473,8 +468,7 @@ const {didMount, didUnmount} = (function getDidMountAndUnmount() {
{ {
clientX, clientX,
clientY, clientY,
}, }
lockToLocalRotation
); );
draggedElement = element; draggedElement = element;
@ -603,10 +597,10 @@ const {didMount, didUnmount} = (function getDidMountAndUnmount() {
} }
return { return {
didMount(element, THREE, componentName, lockToLocalRotation) { didMount(element, THREE, componentName) {
if (cache.length === 0) { if (cache.length === 0) {
initialize(THREE, componentName, lockToLocalRotation); initialize(THREE, componentName);
} }
if (cache.indexOf(element) === -1) { if (cache.indexOf(element) === -1) {
@ -648,20 +642,13 @@ export default function aframeDraggableComponent(aframe, componentName = COMPONE
* Draggable component for A-Frame. * Draggable component for A-Frame.
*/ */
aframe.registerComponent(componentName, { aframe.registerComponent(componentName, {
schema: { schema: {},
/*
* @param {bool} [lockToLocalRotation=true] - When dragging the component,
* should it be screen locked (true), or should its rotation be left alone
* (false).
*/
lockToLocalRotation: {default: true},
},
/** /**
* Called once when component is attached. Generally for initial setup. * Called once when component is attached. Generally for initial setup.
*/ */
init() { init() {
didMount(this, THREE, componentName, this.data.lockToLocalRotation); didMount(this, THREE, componentName);
}, },
/** /**
@ -693,7 +680,7 @@ export default function aframeDraggableComponent(aframe, componentName = COMPONE
* Use to continue or add any dynamic or background behavior such as events. * Use to continue or add any dynamic or background behavior such as events.
*/ */
play() { play() {
didMount(this, THREE, componentName, this.data.lockToLocalRotation); didMount(this, THREE, componentName);
}, },
}); });
} }