I have two planes, how can I calculate angle between them? Is it also possible to calculate angle between two Object3D points like in case of planes?

Heres an example fiddle: /

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(25, 25, 12);

  var material = new THREE.MeshBasicMaterial({
    color: 0x00fff0,
    side: THREE.DoubleSide
  });
  window.plane1 = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), material);
  scene.add(plane1);

  plane1.position.set(0.3, 1, -2);
  plane1.rotation.set(Math.PI / 3, Math.PI / 2, 1);

  window.plane2 = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshBasicMaterial({
    color: 0x0fff00,
    side: THREE.DoubleSide
  }));
  scene.add(plane2);


  // setup rest
  var pointLight = new THREE.PointLight(0xFFFFFF);
  pointLight.position.x = 10;
  pointLight.position.y = 50;
  pointLight.position.z = 130;
  scene.add(pointLight)

  const renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x20252f);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);

  const controls = new THREE.OrbitControls(camera, renderer.domElement);

  animate();

  // TODO: What is the angle between plane1 and plane2?

  function animate() {
    requestAnimationFrame(animate);
    render();
  }

  function render() {
    renderer.render(scene, camera);
  }

<script src=".js/r82/three.js"></script>
<script src=".js"></script>

I have two planes, how can I calculate angle between them? Is it also possible to calculate angle between two Object3D points like in case of planes?

Heres an example fiddle: https://jsfiddle/rsu842v8/1/

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(25, 25, 12);

  var material = new THREE.MeshBasicMaterial({
    color: 0x00fff0,
    side: THREE.DoubleSide
  });
  window.plane1 = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), material);
  scene.add(plane1);

  plane1.position.set(0.3, 1, -2);
  plane1.rotation.set(Math.PI / 3, Math.PI / 2, 1);

  window.plane2 = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshBasicMaterial({
    color: 0x0fff00,
    side: THREE.DoubleSide
  }));
  scene.add(plane2);


  // setup rest
  var pointLight = new THREE.PointLight(0xFFFFFF);
  pointLight.position.x = 10;
  pointLight.position.y = 50;
  pointLight.position.z = 130;
  scene.add(pointLight)

  const renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x20252f);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);

  const controls = new THREE.OrbitControls(camera, renderer.domElement);

  animate();

  // TODO: What is the angle between plane1 and plane2?

  function animate() {
    requestAnimationFrame(animate);
    render();
  }

  function render() {
    renderer.render(scene, camera);
  }

<script src="https://cdnjs.cloudflare./ajax/libs/three.js/r82/three.js"></script>
<script src="https://yume.human-interactive/examples/buffer-geometry/OrbitControls.js"></script>

• javascript
• math
• 3d
• three.js
• rotation

Share Improve this question Follow edited Jul 25, 2017 at 14:31 Patryk asked Jul 25, 2017 at 14:21 PatrykPatryk 5577 bronze badges 1

• There is no such term as angle between two points. Perhaps you mean something else... – MBo Commented Jul 25, 2017 at 17:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You want to find the angle between two three.js plane meshes.

Unrotated, a THREE.PlaneGeometry is oriented to face the positive z-axis. So the plane's normal points in the direction of the positive z-axis.

So, create a ( 0, 0, 1 ) vector, and apply the same rotation to it as is applied to the plane mesh.

Note that plane.quaternion is automatically updated when you set plane.rotation, so you can use the quaternion in the calculation -- like so:

var vec1 = new THREE.Vector3( 0, 0, 1 ); // create once and reuse
var vec2 = new THREE.Vector3( 0, 0, 1 );

vec1.applyQuaternion( plane1.quaternion );
vec2.applyQuaternion( plane2.quaternion );

var angle = vec1.angleTo( vec2 ); // radians

The problem is a bit more plicated if the planes are children of other rotated objects.

Of course, you can use angleTo() to find the angle between any two vectors.

three.js r.86

I would suggest somehow calculating the normal vectors for each plane you are rendering. Once you have these two vectors - let's say n1 and n2 - it is easy to calculate the angle between the planes with the dot product.

If you aren't familiar with the dot product, dot(n1,n2) where n1 = (x1,y1,z1) and n2 = (x2,y2,z2) would be equal to x1*x2 + y1*y2 + z1*z2. There is another simple identity that says dot(n1,n2) = |v1||v2|cos(a) where || indicates the magnitude of a vector - i.e. |v| = sqrt(x*x + y*y + z*z) if v = (x,y,z) - and a is the angle between the normals which is the angle between the planes. Here is a link to a Mathematics Stack Exchange answer.

In short a = arccos(dot(n1,n2) / |n1||n2|).

If you are interested in learning more about how planes are defined and what the normal vector represents try looking at this.

If you know n1 and n2 are unit vectors then the equation simplifies further to a = arccos(dot(n1,n2)).