Three.js - 平面之间的角度

Question

我正在使用three.js 开发一个应用程序，我想知道如何计算两个平面几何之间的角度（我们称之为α）（看看image）

Answer 1

以下是 2 个平面的示例（使用 PlaneHelper 可视化平面）以及它们之间的角度计算。

您可以获取平面的normal 并使用normal1.angleTo(normal2) 计算法线之间的角度。

如果您想知道平面本身的角度；然后 2 个平面和 2 个法线形成一个正方形。您知道法线与平面成 90 度角，并且您知道法线之间的角度。

所以平面之间的角度将是360 - (normal_angle + 180)。

注意：如果您使用的是 PlaneGeometry，您可以使用 PlaneGeometry 中的 3 个点来创建您的 Plane，如下所示：

const vertices = plane.geometry.attributes.position.array;
const plane1 = new THREE.Plane();
plane1.setFromCoplanarPoints(
     new THREE.Vector3(vertices[0], vertices[1], vertices[2]), 
     new THREE.Vector3(vertices[3], vertices[4], vertices[5]), 
     new THREE.Vector3(vertices[6], vertices[7], vertices[8])
);

            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            camera.position.z = 5;
      
      const plane1= new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 2 );
const helper = new THREE.PlaneHelper( plane1, 6, 0xffff00 );
scene.add( helper );

      const plane2= new THREE.Plane( new THREE.Vector3( -0.5, 0.2, 0.2 ), 2 );
const helper2 = new THREE.PlaneHelper( plane2, 6, 0xff00 );
scene.add( helper2 );

      const normal_angle_radians = plane1.normal.angleTo(plane2.normal);
      
      const normal_angle_degress = radians_to_degrees(normal_angle_radians);
      
      const angle_between_planes = 360 - normal_angle_degress - 180;
      
      alert('The degrees angle between planes is: '+ angle_between_planes);



            const animate = function () {
                requestAnimationFrame( animate );

                renderer.render( scene, camera );
            };
      
      function radians_to_degrees(radians)
{
  var pi = Math.PI;
  return radians * (180/pi);
}

            animate();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>