javascript - 如何隐藏从其他(复杂)3D 对象背面伸出的 3D 对象部分？

Question

我正在使用 Three.js(髂骨)渲染复杂的 3D 网格。然后，我将渲染一些简单的球体以及该网格，以标记表面上的某些点(肌肉附着的位置):

       

问题是，网格在某些区域非常薄，标记会伸出背面。

假设标记坐标始终比背面更接近网格的正面，并且球体在网格正面的表面积/体积始终比背面大:

如何隐藏从背面突出的部分，而无需手动干预特定标记？

编辑:这是我可以做到的一种(天真的？)方法。我想要关于这个想法的可行性的反馈，以及(一些关于编写)实际代码的反馈:

• 对于每个标记球体:
  • 找到与球体相交的网格的所有面
  • 计算这些面的所有面向外的法向量(顶点法线？面法线？)
  • 计算从面中心到球体中心的所有距离
  • 添加所有这些法向量，并按各自的距离进行加权
  • 给定(标准化？)结果向量，隐藏指向该方向的半球

我不确定如何编写这些步骤的代码。我也不确定这是否是一个明智的方法。

Answer 1

绘制半球而不是完整的球体。使用 SphereGeometry 的 phiStart 和 phiLength 参数构造函数。

球体的中心仍然位于骨骼的表面(顶点)。

一个球体的方向将由在球体原点计算的法线给出。

Three.js 已经计算了网格的法线，以确定光线如何从网格反射。您可以使用 VertexNormalsHelper 显示网格的法线:

var bone = ...; // bone mesh
var scene = ...; //your THREE.Scene
scene.add(new THREE.VertexNormalsHelper(bone));

可以在这里找到VertexNormalsHelper的源代码:VertexNormalsHelper

您必须计算法向量与 oZ 轴之间的 Angular 差，以便获得 difX 和 difY。这些是您必须在 X 和 Y 方向旋转球体以使其垂直于骨骼局部表面的数量。