将几何图形与平面对齐，选择 3 个相交点答案

【问题标题】：Align Geometry to Plane selecting 3 intersected points将几何图形与平面对齐，选择 3 个相交点
【发布时间】：2021-07-22 17:45:06
【问题描述】：

我有几天时间尝试对齐 3D 对象，选择 3D 对象上相交的 3 个点。

我必须将 GEOMETRY 与平面对齐。

我开始从 3 个点获取 crossVectors。

我做的第一步是将选择的第一个点移动到 0,0,0 位置：

移动后，你可以看到点没有更新。

let matrixToApply = new Matrix4().makeTranslation(
            -this.aligningPoints[0].x, 
            -this.aligningPoints[0].y, 
            -this.aligningPoints[0].z
        );
 this.mesh.geometry.applyMatrix4(matrixToApply)

在这一步之后，接下来是旋转第一个点和第二个点，得到它们之间的角度，这是非常愚蠢的代码，我需要一些帮助来获得更好的解决方案，比如在欧拉上应用四分法。我只需要旋转并匹配平面即可。

if (crossVectors.x > 0 && crossVectors.y > 0 && crossVectors.z < 0) {

            console.log('+ + -');

            var rotateX = new THREE.Vector3(0, 0, 100).angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z));

            this.mesh.geometry.rotateX(rotateX);

        } else if (crossVectors.x > 0 && crossVectors.y < 0 && crossVectors.z < 0) {

            console.log('+ - -');

            var rotateX = new THREE.Vector3(0, 0, -100).angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z));

            this.mesh.geometry.rotateX(rotateX);

        } else if (crossVectors.x > 0 && crossVectors.y < 0 && crossVectors.z > 0) {

            console.log(' + - +');

            var rotateX = new THREE.Vector3(0, 0, 100).normalize().angleTo(new THREE.Vector3(crossVectors.x, 0, crossVectors.z).normalize());

            this.mesh.geometry.rotateY(-rotateX);

        } else if (crossVectors.x < 0 && crossVectors.y < 0 && crossVectors.z > 0) {

            console.log('- - +');

            var rotateX = new THREE.Vector3(0, 0, 100).normalize().angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z).normalize());

            this.mesh.geometry.rotateX(-rotateX);

        } else if (crossVectors.x < 0 && crossVectors.y < 0 && crossVectors.z < 0) {

            console.log('- - -');

            var rotateX = new THREE.Vector3(0, 0, -100).normalize().angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z).normalize());

            this.mesh.geometry.rotateX(rotateX);

        } else if (crossVectors.x > 0 && crossVectors.y > 0 && crossVectors.z > 0) {

            console.log('+ + +');

            var rotateX = new THREE.Vector3(0, 0, 100).normalize().angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z).normalize());

            this.mesh.geometry.rotateX(rotateX);

        } else if (crossVectors.x < 0 && crossVectors.y > 0 && crossVectors.z < 0) {

            console.log('- + -');

            var rotateX = new THREE.Vector3(0, 0, 100).normalize().angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z).normalize());

            this.mesh.geometry.rotateX(rotateX);

        } else if (crossVectors.x < 0 && crossVectors.y > 0 && crossVectors.z > 0) {

            console.log('- + +');

            var rotateX = new THREE.Vector3(0, 0, 100).normalize().angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z).normalize());

            this.mesh.geometry.rotateX(rotateX);

        }

        else {

            alert('IMPOSSIBLE TO ALIGN');

        }

最后一步对齐2点和3点，计算夹角。

我有什么解决办法吗？

真的谢谢大家，我有点疯了，我是新手。

我想要一个更简单的代码，我 90% 确定它存在更好的方法来做到这一点。

这个想法是让平面上的对象由 3 个点对齐：

所需的结果，如您所见，脚与地面对齐。

非常感谢！

【问题讨论】：

我们是在谈论将其调整到水平面（定义为 (0,0,0) 点和 (0,0,1) 向量）还是将其调整到任何平面？
嗨，我们正在讨论调整它 ar (0,0,0) 和 (0,0,1)。实际上我是通过rotatingX和rotatingY来做的，但是它需要很多步骤和ifs，我相信它存在更好的解决方案。直接修改几何图形很重要。谢谢
提示：类似于quat.setFromUnitVectors( crossVectors, planeNormal ); matrix.makeRotationFromQuaternion( quat ); geometry.applyMatrix4( matrix );
是的，quat 终于奏效了！谢谢@WestLangley ！我尝试了其他时间但没有成功，但这次有效！谢谢。 const quat = new THREE.Quaternion(); quat.setFromUnitVectors(crossVectors.normalize(), new THREE.Vector3(0,0,1).normalize()); var mx4 = new THREE.Matrix4() mx4.makeRotationFromQuaternion(quat); this.mesh.geometry.applyMatrix4(mx4);
您能否添加回复以标记为已解决和解决方案？

标签： math three.js quaternions

【解决方案1】：

我已经通过@WestLangley 的回复解决了这个问题，非常感谢您的帮助。

有对齐网格以匹配平面的代码：

let subvector1, subvector2, crossVectors = new THREE.Vector3();

// Create the cross vector with the 3 points
subvector1.subVectors(this.aligningPoints[0], this.aligningPoints[2]);
subvector2.subVectors(this.aligningPoints[0], this.aligningPoints[1]);
crossVectors.crossVectors(subvector1, subvector2);

// Move the mesh (0,0,0) plane
this.mesh.geometry.applyMatrix4(new Matrix4().makeTranslation(-this.aligningPoints[0].x, -this.aligningPoints[0].y, -this.aligningPoints[0].z))

// Align the mesh to the plane with quaternion and matrix4
const quaternion = new THREE.Quaternion();
quaternion.setFromUnitVectors( crossVectors.normalize(), new THREE.Vector3(0,0,1).normalize() ); 
let matrix4 = new THREE.Matrix4()
matrix4.makeRotationFromQuaternion( quaternion ); 
this.mesh.geometry.applyMatrix4( matrix4 );

【讨论】：