Hi,
I want to simulate the grabbable mesh event with the vr controller using Aframe - three js.
I have two approaches:
multiplying the controller matrix and then multiply by the mesh transformation matrix:
var newControllerMatrix = this.controllerObject.matrixWorld;
var cubeMatrix = this.el.getObject3D("mesh").matrixWorld;
if(this.controllerObject.el.getAttribute('my-buttons-check').grabObject)
{
var oldControllerInverseTransForm = new THREE.Matrix4().getInverse(this.oldControlTransForm);
var translationPose = new THREE.Matrix4().multiplyMatrices(newControllerMatrix , oldControllerInverseTransForm );
this.el.getObject3D("mesh").matrix.multiplyMatrices(translationPose ,cubeMatrix );
}
this.oldControlTransForm = newControllerMatrix ;
Or 2, calculating controller delta position and then apply it to the mesh position.
var controllerPose= this.controllerObject.matrixWorld;
var cubeMatrix = this.el.getObject3D("mesh").matrixWorld;
if(this.controllerObject.el.getAttribute('my-buttons-check').grabObject)
{
var currentPos = new THREE.Vector3(controllerPose.elements[12],controllerPose.elements[13],controllerPose.elements[14]);
var oldPos= new THREE.Vector3(this.oldControlTransForm .elements[12],this.oldControlTransForm .elements[13],this.oldControlTransForm .elements[14]);
var newPos = new THREE.Vector3().subVectors ( currentPos, oldPos);
this.el.getObject3D("mesh").matrix.makeTranslation (newPos.x,newPos.y,newPos.z);
}
this.oldControlTransForm = controllerPose;
But none of the methods make the mesh move at the same time the controller does.
I know this is most a Math question, but I tried the same algorithm in Opengl/C++and it works. I dont know what I am missing in three js.
I appreciate any help in advance.