I wrote a custom component based on the hand-tracking-controls component from aframe library to move the object by pinching it in the scene.
The idea is to listen to the pinchmoved event emitted by the entity leftHand to move the object. The code for my component can be found below:
AFRAME.registerComponent('pinch-to-move', {
init: function() {
var sceneEl = document.querySelector('a-scene');
var trackedEl = sceneEl.querySelectorAll('a-entity')[2];
this.trackedEl = trackedEl;
var targetEl = sceneEl.querySelectorAll('a-gltf-model')[0];
this.targetEl = targetEl;
targetEl.setAttribute('pinchable', {pinchDistance: 0.05})
this.localPosition = new THREE.Vector3();
trackedEl.addEventListener('pinchmoved', this.onPinchMoved);
this.onPinchMoved = this.onPinchMoved.bind(this);
},
onPinchMoved: function(evt) {
var evtDetail = this.evtDetail;
var localPosition = this.localPosition;
localPosition.copy(evt.detail.position);
this.targetEl.object3D.updateMatrixWorld();
this.targetEl.object3D.worldToLocal(localPosition);
this.targetEl.object3D.position.x, this.targetEl.object3D.position.y, this.targetEl.object3D.position.z = localPosition.x, localPosition.y, localPosition.z;
evtDetail.value = (this.targetEl.object3D.position.x, targetEl.object3D.position.y, this.targetEl.object3D.position.z);
this.targetEl.emit('positionchanged', evtDetail);
this.trackedEl.emit('pinchmoved');
}
});
Please note:
- targetEl is the object to be moved by pinching.
- trackedEl is the leftHand entity which uses the hand-tracking-controls and emits the pinchmoved events.
Lastly, I believe that the problem lies in this line:
this.targetEl.object3D.updateMatrixWorld();
because the updateMatrixWorld methods doesn't work.
Full code can be found here
I'll be thankful if anybody can propose a solution.
I created breakpoints in my code and tried console.log method to print the output of every line, which gave this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'object3D')
at <anonymous>:1:28
at ?editor_console=true:977:28
I was able to fix this error by adding
this.targetEl = targetEl
to the code above.