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

Question

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

我必须将 GEOMETRY 与平面对齐。

我开始从 3 个点获取交叉矢量。

我做的第一步是将选定的第一个点移动到 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 个点对齐：

期望的结果，如您所见，脚与地板平面对齐。

非常感谢！

Answer 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 );

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

Align Geometry to Plane selecting 3 intersected points

math

quaternions

three.js