三个js相交面顶点位置有问题答案

【问题标题】：Having trouble with Three js intersection face vertex positions三个js相交面顶点位置有问题
【发布时间】：2017-07-12 14:55:04
【问题描述】：

喂！我在三个js中工作。我正在通过 THREE.JSONLoader 加载模型。现在我可以选择这些对象和他们的脸了。这是工作。但是现在我想获取所选面的顶点，检查下面的代码：

intersections = raycaster.intersectObjects( objects );

if ( intersections.length > 0 ) {

            if ( intersected != intersections[ 0 ].object ) {

                intersected = intersections[ 0 ].object;

                /*HERE*/
                    console.log("Hit-face a @ " + intersections[0].face.a);
                    console.log("Hit-face b @ " + intersections[0].face.b);
                    console.log("Hit-face c @ " + intersections[0].face.c);

                    var faceColorMaterial = new THREE.MeshBasicMaterial( 
                    { color: 0xffffff, vertexColors: THREE.FaceColors } );

                    var sphereGeometry = new THREE.SphereGeometry( 0.1, 32, 16 );
                    var sphereGeometryf = new THREE.SphereGeometry( 3, 32, 16 );
                    var sphereGeometrys = new THREE.SphereGeometry( 3, 32, 16 );
                    var sphereGeometryt = new THREE.SphereGeometry( 3, 32, 16 );

                    var sphere = new THREE.Mesh( sphereGeometry, faceColorMaterial );
                    sphere.position.set(intersections[0].point.x, intersections[0].point.y, intersections[0].point.z);

                    var spheref = new THREE.Mesh( sphereGeometryf, faceColorMaterial );
                    spheref.position.set(intersections[0].object.geometry.vertices[intersections[0].face.a].x + intersections[0].object.position.x,
                    intersections[0].object.geometry.vertices[intersections[0].face.a].y + intersections[0].object.position.y,
                    intersections[0].object.geometry.vertices[intersections[0].face.a].z + intersections[0].object.position.z);

                    var spheres = new THREE.Mesh( sphereGeometrys, faceColorMaterial );
                    spheres.position.set(intersections[0].object.geometry.vertices[intersections[0].face.b].x + intersections[0].object.position.x,
                    intersections[0].object.geometry.vertices[intersections[0].face.b].y + intersections[0].object.position.y,
                    intersections[0].object.geometry.vertices[intersections[0].face.b].z + intersections[0].object.position.z);

                    var spheret = new THREE.Mesh( sphereGeometryt, faceColorMaterial );
                    spheret.position.set(intersections[0].object.geometry.vertices[intersections[0].face.c].x + intersections[0].object.position.x,
                    intersections[0].object.geometry.vertices[intersections[0].face.c].y + intersections[0].object.position.y,
                    intersections[0].object.geometry.vertices[intersections[0].face.c].z + intersections[0].object.position.z);



                    scene.add(sphere);
                    scene.add(spheref);
                    scene.add(spheres);
                    scene.add(spheret);
                /*HERE*/
            }
        }

所以在这个示例代码中，“球体”是光线与第一个对象相遇的交点。

spheref-spheres-spheret 是顶点可视化，但是当我将这些球体添加到这些顶点时，它们在其他地方（可见）。

上面的方法与这个例子一起工作，通过用我上面的代码替换 onDocumentMouseDown 事件：http://stemkoski.github.io/Three.js/Mouse-Click.html

但它不适用于加载的对象。

【问题讨论】：

标签： javascript three.js intersection vertex

【解决方案1】：

您错过了将对象的 WorldMatrix 应用于您的点。

这是它的工作原理：

首先你得到原始网格的面点如下。

PointA = intersections[0].object.geometry.vertices[intersections[0].face.a]

在这一点上没有缩放、旋转、平移。因此，您需要将这些添加到您的观点中以获得正确的位置。为此，您只需将对象的 WorldMatrix 应用于该点。

PointA.applyMatrix4(intersections[0].object.matrixWorld);

现在您有了放置球体的真实坐标。 (PointA.x, PointA.y, PointA.z)

【讨论】：

【解决方案2】：

好的，我解决了^^...，问题出在体重秤上...

所以问题是我使用了这个： myobject.scale.set(3, 3, 3);

但是顶点坐标没有改变，所以我把这行注释掉了，我会导出3倍大的模型。但另一方面，如果您想使用 scalled 模型，那么您应该将 x、y、z 值添加 3 次（x 次根据您的比例，其中 x 是一个数字）。

【讨论】：