面到相机的角度 - three.js答案

【问题标题】：Angle of Face to Camera - three.js面到相机的角度 - three.js
【发布时间】：2016-04-03 12:36:26
【问题描述】：

如果我创建一个只有一个面（三角形）的几何体，像这样：

[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 度）。

【问题讨论】：

标签： three.js

【解决方案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

【讨论】：