I am trying to rotate a cube by pinching it around it’s axis. To do this, I use aframe’s hand-trcaking-controls component that emit pinchmoved event. I am using latest aframe version 1.6 and Meta Quest 3 browser to test my code. Link to the JSFiddle
A minimal example can be found below to reproduce the errors
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@3cad96337fa22be307c7408452336fa82e1181ca/dist/aframe-master.min.js"></script>
<script>
AFRAME.registerComponent('pinch-to-rotate-cube', {
dependencies: ['pinchable'],
schema: {
width: {
default: 0.5
}
},
init: function() {
var sceneEl = this.sceneEl = document.querySelector('a-scene');
var trackedEl = this.trackedEl = sceneEl.querySelector('#rightHand');
this.el.trackedEl = trackedEl;
var targetEl = sceneEl.querySelector("#yellowCube");
targetEl.setAttribute('pinchable', {
pinchDistance: 0.05
})
trackedEl.addEventListener('pinchmoved', this.onPinchMovedAndRotated);
this.onPinchMovedAndRotated = this.onPinchMovedAndRotated.bind(this);
this.el.targetEl = targetEl;
},
onPinchMovedAndRotated: function(evt) {
var localPosition = this.localPosition;
var evtDetail = this.evtDetail;
var localPosition = new THREE.Vector3();
localPosition.copy(evt.detail.position);
this.targetEl.object3D.updateMatrixWorld();
this.targetEl.object3D.worldToLocal(localPosition);
this.targetEl.object3D.position.z = evt.detail.position.z;
this.targetEl.object3D.position.y = evt.detail.position.y;
this.targetEl.object3D.position.x = evt.detail.position.x;
evtDetail.value = (this.targetEl.object3D.position.x, this.targetEl.object3D.position.y, this.targetEl.object3D.position.z);
this.targetEl.emit('positionchanged', evtDetail);
this.trackedEl.emit('pinchmoved');
//to rotate the object
var theta = this.CalculteRotationAngle(evt.detail.position);
console.log(theta);
var invWorldRot = this.targetEl.object3D.getWorldQuaternion(new THREE.Quaternion());
this.targetEl.object3D.rotation = invWorldRot.multiply(theta);
},
CalculteRotationAngle: function(pinchWorldPosition) {
var rotationAngle
var worldPosition = new THREE.Vector3();
worldPosition.copy(this.targetEl.object3D.position);
rotationAngle = worldPosition.angleTo(pinchWorldPosition);
return rotationAngle;
}
});
</script>
</head>
<body>
<a-scene physics="debug: true" cursor="rayOrigin: mouse" xr-mode-ui="XRMode: xr">
<!-- Yellow cube -->
<a-box id="yellowCube" scale="0.0925 0.0925 0.0925" color="yellow" position="-0.45 1.5 -0.45" rotation="0 0 0" mesh-shadows></a-box>
<!-- Camera system -->
<a-entity id="camera-control" wasd-controls movement-controls="speed:0.2;">
<!-- Camera head -->
<a-entity id="camera-head" camera position="0.5 1.5 1" look-controls="pointerLockEnabled:true;"></a-entity>
<a-entity id="leftHand" hand-tracking-controls="hand: left;"></a-entity>
<a-entity id="rightHand" hand-tracking-controls="hand: right;" pinch-to-rotate-cube></a-entity>
</a-entity>
</a-scene>
</body>
</html>
Although, with this code I am able to move the cube but not rotate it about it’s axis. Not sure but I think I am making some mistake in calculating the angle of rotation. Please could you suggest any workaround?
Thanks