0

I'm using FlyControls.js for my camera view

I'm trying to add a projectile to my object

The projectile should use the angles from camera position, to crosshair/reticle position, and flow freely through 3D space

I've tried to use camera.position.angleTo(crosshair.position) but it only returns a single float value. In 2D I'd use sin and cos, but 3D is different

Also, the projectile is a cylinder, how would I rotate the cylinder to face the direction it's going?

//how to get this information?
projectile.angle = {
    x: ?,
    y: ?,
    z: ?,
};

//how to get this information?
projectile.rotation = faceTowardsDestination;

function animate(){
    //projectile movement
    projectile.position.x += projectile.angle.x * projectile.speed;
    projectile.position.y += projectile.angle.y * projectile.speed;
    projectile.position.z += projectile.angle.z * projectile.speed;

    requestAnimationFrame(animate);
}

Projectile (cylinder) should fire from spaceship, towards the crosshair point, and point towards it's destination enter image description here

Vardan Betikyan
  • 354
  • 5
  • 20

2 Answers2

1

What you're searching for is the Object3D.lookAt(vec3) method see here for docs. It rotates the object so it's directly "looking at" the position you tell it to.

// Establish the coordinages of the target
const target = new THREE.Vector3(x, y, z);

// Make the missile point directly at the position of your target
projectile.lookAt(target);

let speed = 1;

function animate() {
    // Now you move it forward by translating down its own Z-axis
    projectile.translateZ(speed);
    requestAnimationFrame(animate);
}

When your projectile is already rotated to face the crosshairs, you only need to translate it down its local Z-axis (not the global z-axis), so no need to worry about setting the X & Y coordinates.

M -
  • 26,908
  • 11
  • 49
  • 81
  • Great answer, just make sure that the target is far off in front of the camera by projecting the crosshair into the distance. – MXDVL May 15 '21 at 09:23
0

In order for a projectile to go towards the crosshair, you first have to project the location of the crosshair far in front of the camera.

The simplest way I can suggest doing this is creating an infinite plane that's a child of child of the camera, placing it some distance away, and then casting a ray using a Raycaster to find the intersection of the crosshair with this plane. See an example of intersection between the mouse pointer and a surface here.

The vector between your ship's position and this intersection is the direction of travel you'll want to use for your projective. You probably want to adjust the rotation of the ship accordingly.

MXDVL
  • 348
  • 2
  • 9
  • My `crosshair` is projected properly and part of the camera. The issue I'm having is getting the projectile to go from point A (being the ship) to point B (being the crosshair). I don't think raycasting is necessary since pointA and pointB are pre-determined (but I could be wrong?) – Vardan Betikyan May 14 '21 at 08:11
  • Are you sure point B is far away from the camera? If so, then the only thing you need is the direction of travel between A and B. Technically B should be infinitely far away, but obviously that’s not really possible. If B is closer to the camera than A (the ship) you’ll be sending your projectiles backwards. – MXDVL May 15 '21 at 09:18