Three.js 约束对象拖动到另一个对象的表面

Question

我希望能够拖动一个对象，但让它“捕捉”到另一个对象的表面。 我不在乎它是否只是在我释放鼠标时“捕捉”，或者它是否实时更新。

最终目标：在 Blender 中创建一个平滑的形状，将其导入，并能够捕捉到该形状的拖动。我知道我可以通过一些数学运算使用程序生成的表面来做到这一点，但我希望使用一些非程序生成的表面......或者至少，我想要使用的表面我还没有弄清楚如何在程序上生成。

我试着举这个例子：http://stemkoski.github.io/Three.js/Mouse-Click.html 并将“点击”效果更改为“拖动”效果。然后我将它与这个例子结合起来：http://mrdoob.github.io/three.js/examples/webgl_interactive_draggablecubes.html

效果正在发挥作用，因为我可以将任何立方体拖过球体，并且脸部会突出显示。

然后我尝试使用这个有缺陷的逻辑将拖动的对象捕捉到球体的表面：

SELECTED.position.x = intersectsRay[ 0 ].face.normal.x;
SELECTED.position.y = intersectsRay[ 0 ].face.normal.y;
SELECTED.position.z = intersectsRay[ 0 ].face.normal.z;

问题：被拖动的对象总是捕捉到球体的中心...

原因是，（我认为......）在这种情况下，面部“正常”是（球体）的中心。

有谁知道找到 FACE 的 x、y、z 的方法（无论是什么形状），或任何其他方法来实现这个概念？

Answer 1

一个简单的解决方案是不使用局部（和标准化）面法线，例如，您可以使用顶点索引。

类似：

intersectedOBJ.geometry.vertices[intersect.face.a]

这样，您可以将拖动的对象捕捉到面的一个顶点。

还有一个您可以使用的面部“质心”，或者您可以自己计算面部的中心。