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!

Piotr Adam Milewski · Accepted Answer · 2019-11-14 06:19:27Z

2

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.

edited Nov 14, 2019 at 6:19

answered Jun 29, 2017 at 15:46

Piotr Adam Milewski

14.7k3 gold badges23 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sidd Over a year ago

thanks for the answer it helped me a lot... if anybody in future sees this the el.object3D.position works fine for any object but it wont give you the position of cursor if you are using it, yYu need to access its location using el.object3D.matrix.elements[12] as mentioned above 12 is for x, 13 is for y and 14 is for z.

Collectives™ on Stack Overflow

Aframe change object location with three.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related