title: How to calculate angle between two planes?
body: <p>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?</p>
  
  <p>Heres an example fiddle: <a href="https://jsfiddle.net/rsu842v8/1/" rel="nofollow noreferrer">https://jsfiddle.net/rsu842v8/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  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);
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.js"&gt;&lt;/script&gt;
  &lt;script src="https://yume.human-interactive.org/examples/buffer-geometry/OrbitControls.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>