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

Question

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

终极目标：在Blender中创建一个平滑的形状，导入它，并能够捕捉到该形状。我知道我可以通过程序生成的表面进行一些数学运算，但我希望使用一些非程序生成的表面..或者至少，我想要使用的表面我还没弄明白在程序上生成。

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

效果正常，因为我可以将任何立方体拖过球体和脸部hilights。

然后我尝试拍摄被拖动的物体，并使用这个有缺陷的逻辑将其捕捉到球体的表面：

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]

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

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