Three.js - 获取棋盘格对象的单个面的位置

Question

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

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.你知道我的代码有什么问题吗？

提前感谢您的回复!

Answer 1

A THREE.Face3没有位置或矩阵.您需要使用面部索引a,b并c找到相应的顶点,然后您可以使用这些点计算面部质心(也就是面部重心点):

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;

这是一个更新的小提琴.