Three.js - 获取棋盘格对象的单个面的位置 [英] Three.js - Get the position of a single face of a tessellated object

问题描述

我有一个平坦的表面，我已经爆炸并镶嵌成三角形。我想获得每张脸的位置来应用动画，但显然我无法做到这一点。

I have a flat surface which I have exploded and tessellated into triangles. I want to get the position of every single face to apply an animation, but apparently I am not able to do that.

if (intersects.length > 0) {

    // if the closest object intersected is not the currently stored intersection object
    if (intersects[0].object != INTERSECTED) {


        if (INTERSECTED) {
            INTERSECTED.face.color.setHex(INTERSECTED.currentHex);
        }

        INTERSECTED = intersects[0];

        INTERSECTED.currentHex = INTERSECTED.face.color.getHex();
        INTERSECTED.face.color.setHex(0xc0392b);
        INTERSECTED.object.geometry.colorsNeedUpdate = true;

        var position = new THREE.Vector3();
        position.setFromMatrixPosition( INTERSECTED.matrixWorld );
        alert(position.x + ',' + position.y + ',' + position.z);
    }
}

我尝试使用 INTERSECTED .face.matrixWorld.getPosition（），如这个例子，但它抛出了一个错误。 此处 您可以找到包含完整代码的JSFiddle。你知道我的代码有什么问题吗？

I tried to use INTERSECTED.face.matrixWorld.getPosition(), as specified in this example, but it's throwing an error. Here you can find a JSFiddle with the full code. Do you know what's the issue with my code?

提前感谢您的回复！

推荐答案

THREE.Face3 没有位置或矩阵。您需要使用面部索引 a ， b 和 c 找到相应的顶点然后你可以计算你的面部质心（也就是面部重心点）使用这些点：

A THREE.Face3 has no such thing as a position or a matrix. You need to use the face indexes a, b and c to find the corresponding vertices and then you can calculate your face centroid (also the face gravity point) using those points:

var geometry = INTERSECTED.object.geometry;
var face = INTERSECTED.face;

var vertices = geometry.vertices;
var v1 = vertices[ face.a ];
var v2 = vertices[ face.b ];
var v3 = vertices[ face.c ];

// calculate the centroid
var position = new THREE.Vector3();
position.x = ( v1.x + v2.x + v3.x ) / 3;
position.y = ( v1.y + v2.y + v3.y ) / 3;
position.z = ( v1.z + v2.z + v3.z ) / 3;

这里有 更新小提琴 。

Here an updated fiddle.

这篇关于Three.js - 获取棋盘格对象的单个面的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！