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

时间:2016-03-15 16:37:13

标签: javascript three.js

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

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

我尝试使用this example中指定的INTERSECTED.face.matrixWorld.getPosition(),但它引发了错误。 Here 您可以找到包含完整代码的JSFiddle。你知道我的代码有什么问题吗?

提前感谢您的回复!

1 个答案:

答案 0 :(得分:7)

THREE.Face3没有位置或矩阵。您需要使用面部索引abc来查找相应的顶点,然后您可以使用这些点计算face centroid(也就是面部重力点) :

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;

这是 updated fiddle