How can I calculate the 3D angle between two points?

Question

Let's say I have two vertices and I want to know the 3D angle between the two. By 3D angle, I mean the angle between the one vertex and another on each of the three dimensional planes, stored as

{ x, y, z }

function getAngleBetweenVertices(vert1, vert2){
  return {
    x: 0, // ?
    y: 0, // ?
    z: 0  // ?
  }
}

// Classes

class Vertex {
  constructor(position){
    this.position = {
      x: 0,
      y: 0,
      z: 0,
      ...position
    };
  }
}

// Init

let vert1 = new Vertex({ x: 1, y: 0, z: 1 });
let vert2 = new Vertex({ x: 0, y: 1, z: 1 });
let angle = getAngleBetweenVertices(vert1, vert2);
console.log("angle ", angle);

For example in the above image, I've traced over a line segment joining two vertices on a triangle. It should be possible to find the angle between the two vertex positions on the x, y, and z axis.

How can I calculate the three dimensional angle between two vertices?

Answer 1

You can have angle between two directions v1,v2 (vectors) like this:

ang = acos(dot(v1,v2)/(|v1|.|v2|))

which translates in 3D to:

ang = acos( (x1*x2 + y1*y2 + z1*z1) / sqrt( (x1*x1 + y1*y1 + z1*z1)*(x2*x2+y2*y2+z2*z2) ) )

However you can not have angle between two points that simply has no meaning. Also beware 3D angle is not what you think it is (its angle in steradians and you can look at it as a volume coverage ... normal angle is area coverage) and yes its also scalar value. So what you are looking for are direction cosines or Euler angles (for which you need more info and order of transforms not to be ambitious) or transform matrices.

But as I suspected its an XY problem and based on your comments I was right.

So your real problem (based on comments) is to find the reflected ray from (triangle) face. Using angles (direction cosines nor euler angles nor transform matrices) is a really bad idea as that would be extremly slow. Instead use simple vector math I see it like this:

So you got ray direction dir and want the reflected one dir' from face with normal nor so:

dir' = 2 * ( nor*dot(-dir,nor) + dir ) - dir
dir' = 2 * ( -nor*dot(dir,nor) + dir ) - dir
dir' = -2*nor*dot(dir,nor) + 2*dir - dir
dir' = -2*nor*dot(dir,nor) + dir
dir' = dir-2*nor*dot(dir,nor)

so in 3D it is:

dir=(dx,dy,dz)
nor=(nx,ny,nz)
t = 2*(dx*nx + dy*ny + dz*nz) // 2*dot(dir,nor)
dx' = dx-t*nx
dy' = dy-t*ny
dz' = dz-t*nz

as you can see no goniometrics or angles are needed whatsoever... Also does not matter if normal points in or out of face/object the dot handles the signs on its own...

In case you need the normal can be computed by cross product of its 2 sides so if the triangle is defined by v0,v1,v2 points then:

nor = cross( v1-v0 , v2-v1 )

Here an example where I use this technique for a raytracer:

• Reflection and refraction impossible without recursive ray tracing?

its mine GLSL ray tracer supporting reflections on triangle faces and it has no goniometrics in it ... look for // reflect comment in the fragment shader especially look for:

ray[rays].dir=ray[rays].dir-(2.0*t*ray[rays].nor);

its the reflection where

t=dot(ray[i0].dir,ray[i0].nor);

where dir is ray direction and nor is face normal (look familiar? yes its the same equation)...

Answer 2

I'm not sure if this code is correct but I think its what I was looking for.

// Utilities

function normalizeAngle(angle){
  if (angle > 360) return angle - 360;
  if (angle < 0) return 360 + angle;
  else return angle;
}

function getAngleBetweenPoints(cx, cy, ex, ey){
  var dy = ey - cy;
  var dx = ex - cx;
  var theta = Math.atan2(dy, dx);
  theta *= 180 / Math.PI;
  return theta;
}

function getAngleBetweenVertices(vert1, vert2){
  return {
    x: normalizeAngle(getAngleBetweenPoints(vert1.position.z, 
        vert1.position.x, vert2.position.z, vert2.position.x)),
    y: normalizeAngle(getAngleBetweenPoints(vert1.position.z, 
        vert1.position.y, vert2.position.z, vert2.position.y)),
    z: normalizeAngle(getAngleBetweenPoints(vert1.position.x, 
        vert1.position.y, vert2.position.x, vert2.position.y))
  }
}

// Classes

class Vertex {
  constructor(position){
    this.position = {
      x: 0,
      y: 0,
      z: 0,
      ...position
    };
  }
}

// Init

let vert1 = new Vertex({ x: 1, y: 0, z: 1 });
let vert2 = new Vertex({ x: 0, y: 1, z: 1 });
let angle = getAngleBetweenVertices(vert1, vert2);
console.log("angle ", angle);