Draw a line and rotate it from a "gun"

Hey guys.

Having a hard time doing something that I think should be easy, but not for me :frowning:

I have a “gun” object and I want to shoot a laser out of it (simple right!). The problem is when I rotate the gun around I can’t seem to match the angle line with the rotation of the gun.

I have a test script where I’m rotating the gun on a keyboard event. It starts out looking OK soon goes out of sync. Here is my code, and a snapshot of what it’s looking like.

keyDown() {
  this.testWand.rotateX(.1);
  this.testWand.rotateZ(.1);

  let start = this.testWand.position;// .getWorldPosition();
  let end = new Vector3(start.x, start.y, start.z + -10000);

  end.applyAxisAngle(new Vector3(1, 0, 0), this.testWand.rotation.x);
  end.applyAxisAngle(new Vector3(0, 0, 1), this.testWand.rotation.z);

  let geometry = new THREE.Geometry();
  geometry.vertices.push(start);
  geometry.vertices.push(end);
  let material = new THREE.LineBasicMaterial({ color: 0xffff00 });
  let line = new THREE.Line(geometry, material);
  this.scene.add(line);

}

image
Starts out looking ok with the yellow line coming out of the gun.

image
But quickly goes out of alignment.

Any help greatly appreciated.

Holy smokes… I got lucky and solved it.

    // end.applyAxisAngle(new Vector3(1, 0, 0), this.testWand.rotation.x);
    // end.applyAxisAngle(new Vector3(0, 1, 0), this.testWand.rotation.y);
    // end.applyAxisAngle(new Vector3(0, 0, 1), this.testWand.rotation.z);
    end.applyQuaternion(this.testWand.quaternion);

2 Likes