如何计算两架飞机之间的角度?

时间:2017-07-25 14:21:21

标签: javascript math 3d three.js rotation

我有两架飞机,我怎样才能计算出它们之间的角度?是否也可以像平面一样计算两个Object3D点之间的角度?

下面是一个小例子:https://jsfiddle.net/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.com/ajax/libs/three.js/r82/three.js"></script>
<script src="https://yume.human-interactive.org/examples/buffer-geometry/OrbitControls.js"></script>

2 个答案:

答案 0 :(得分:6)

你想找到两个three.js平面网格之间的角度。

未旋转,THREE.PlaneGeometry面向正z轴。因此,平面的法线指向正z轴方向。

因此,创建一个(0,0,1)向量,并对其应用与应用于平面网格的相同旋转。

请注意,设置plane.quaternionplane.rotation会自动更新,因此您可以在计算中使用四元数,如下所示:

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

如果飞机是其他旋转物体的孩子,问题就会复杂一些。

当然,您可以使用angleTo()来查找任意两个向量之间的角度。

three.js r.86

答案 1 :(得分:3)

我建议以某种方式为你正在渲染的每个平面计算法线向量。一旦你有了这两个向量 - 让我们说n1n2 - 很容易计算带有点积的平面之间的角度。

如果您不熟悉点积,dot(n1,n2) n1 = (x1,y1,z1)n2 = (x2,y2,z2)等于x1*x2 + y1*y2 + z1*z2。另一个简单的标识是dot(n1,n2) = |v1||v2|cos(a),其中||表示向量的大小 - 即|v| = sqrt(x*x + y*y + z*z) if v = (x,y,z) - a是法线之间的角度,即角度飞机之间。这是指向Mathematics Stack Exchange answer的链接。

简而言之a = arccos(dot(n1,n2) / |n1||n2|)

如果您有兴趣了解有关如何定义平面的更多信息以及法线向量所代表的内容,请尝试查看this

如果您知道n1n2unit vectors,则等式会进一步简化为a = arccos(dot(n1,n2))