旋转三角形以匹配另一半的正方形

Question

好的，

所以我有一个由2个三角形组成的瓷砖组成的3D世界。现在，当我将鼠标悬停在这些三角形中的一个上时，我可以获得3个顶点和它的正常等等。

我想要实现的是，基于悬停的蓝色三角形的顶点，围绕斜边（中间黑线）旋转它还是做其他事情？这样我就可以得到匹配点（如图所示）。现在我有了正方形的4个顶点，因此我可以在它上面绘制一个覆盖2个三角形的正方形。

我使用threejs所以我想用一个简单的矩阵旋转我应该可以做到这一点，但我失败了。

Answer 1

如果你知道Vector3让我们说v这条黑线，我认为你应该能够做到这一点：

var axis = v.normalize();

var theta = Math.PI;

var matrix = new THREE.Matrix4().makeRotationAxis( axis, theta );

然后将此矩阵应用于三角形。

您可以通过v获取向量v = new THREE.Vector3().subVectors( a, b );，其中a和b是该行上的点。

在此 Fiddle 中，您可以看到它有效。请注意，.sub( a, b )在较新的Three.js库中已更改为subVectors( a, b )。