Aframe change object location with three.js

Question

I am developing a game on A-frame. In my game I need to make a shooting effect for which I am using a gun model and placing it behind the cursor, coded the click event so that an object will relocate in front of the gun and goes the direction of the cursor.

I am using setAttribute and requestAnimationFrame :-

renderObj: function(obj){
        window.requestAnimationFrame(function() {
        renderObj(obj);
        });
    }

to create the animation effect of bullet moving in a particular direction.

when the function calls itself again I am not able to retrieve the location of the object set by setAttribute using

var objWorldPos = new THREE.Vector3();
objWorldPos.setFromMatrixPosition(obj.object3D.matrixWorld);

whenever I change the position using setAttribute I am also updating the attribute in the bullet tag by obj.attributes.position="x y z"; i know this is not the best practice as I should be able to recover the position so is there a way I can set the position of the element using three.js and the retrieve it using THREE.Vector3()'s object3D.matrixWorld method...

Any help will be appreciated thanks a ton!

Answer 1

Personally I don't mix locating objects in three.js and a-frame, when setting the position in three.js via object3D.position.set(), i can't retrieve it via the getAttribute('position') method.
You can set the locataion by setting:

el.object3D.position.x = 5;
//OR
el.object3D.position.set(5,4,0);
//OR BY THE WORLD MATRIX AS 
var matrix = new THREE.Matrix4();
matrix.set(11,12,13,14,
           21,22,23,24,
           31,32,33,34,
           41,42,43,44);
el.object3D.applyMatrix(matrix);
//RETRIEVE THE LOCATION:
console.log(el.object3D.position.x);
console.log(el.object3D.position);
console.log(el.object3D.matrixWorld);

As far as i know in this context the Matrix4 is the transformation matrix. You can get information in explicit detail in the three.js documentation, and the a-frame documentation.

---

ngoKevin made something You are trying to achieve by:

1) Getting the gun position via the matrixWorld

var matrixWorld = gunEl.object3D.matrixWorld;
position.setFromMatrixPosition(matrixWorld);
bulletEl.setAttribute('position', position);

2) Setting the bullet rotation:

var rotation = gunEl.getAttribute('rotation');
bulletRotation = bulletEl.getComputedAttribute('rotation');
  bulletEl.setAttribute('rotation', {
    x: bulletRotation.x + rotation.x,
    y: bulletRotation.y + rotation.y,
    z: bulletRotation.z + rotation.z
  });
});

Then add the bullet via appendChild() and make it move on tick()

Check out the project, as it will definitely help You out.