面对摄像机的角度 - three.js

Question

如果我创建一个只有一个面（三角形）的几何体，如下所示：

[CoffeeScript语法]

    geometry = new THREE.Geometry()
    geometry.vertices.push(new THREE.Vector3(0, 0, 0))
    geometry.vertices.push(new THREE.Vector3(0, 10, 0))
    geometry.vertices.push(new THREE.Vector3(0, 10, 10))
    geometry.faces.push(new THREE.Face3(0, 1, 2))
    mesh = new THREE.Mesh(geometry, material)
    mesh.position.x = 10
    @scene.add(mesh)

我渲染场景：

    @renderer.render(@scene, @camera)

如何找出脸部与相机的角度？

澄清：如果我将三角形指向相机，使宽度和高度最大化similar to this picture，那么我希望角度为0度（或180度）。

如果面部旋转到三角形正好在线的相机，因为我正在侧面看similar to this picture，我希望角度为90度（或270度）。

Answer 1

我将假设相机正在寻找的方向对你来说并不重要，只有它的位置。

你想要做的是取面法线向量的点积（指向三角形面向的矢量）和指向从三角形到摄像机的方向的矢量。

此处 n1 向量是面法线：

var triangleNormal = triangleMesh.geometry.faces[0].normal

具有单位长度。 v 是从三角形指向相机的矢量

var dirToCamera = camera.position.clone().sub(triangleMesh.position);

和 n2 只是标准化的 v ：

dirToCamera.normalize();

现在，要获得α，您可以使用 n1 和 n2

的点积

var angleValue = triangleNormal.dot(dirToCamera);

然而'angleValue'不以度数表示，它是度数的余弦。当三角形面向摄像机时，该值为1;当处于90度时，该值为0;当面向相反方向时，该值为-1。

如果你想用度数，只需：

var angle = Math.acos(angleValue) * 180/Math.PI;

当更多的事情。在计算 n2 （dirToCamera）时，我使用了三角形网格位置。如果您使用的是具有多个面的对象，则可能需要计算每个三角形的中心点并使用该中心点而不是网格位置。

这是codepen example