Question

我正在尝试向已添加到场景中的形状注入孔，但有些事情出错...... 所以详细说明：形状

        var well,
            vertices = [],
            wellShape,
            wellMaterial = new THREE.MeshLambertMaterial({color: this.params.wellsColor});

            vertices.push(new THREE.Vector2(0,3000));
            vertices.push(new THREE.Vector2(4000,3000));
            vertices.push(new THREE.Vector2(4000,0));
            vertices.push(new THREE.Vector2(0,0));

            wellShape = new THREE.Shape(vertices);

            well = new THREE.Mesh( new THREE.ShapeGeometry(wellShape), wellMaterial);

    scene.add(well);

    well.geometry.dynamic = true;

    var hole = [
            new THREE.Vector3(300,300,0),
            new THREE.Vector3(1000,300,0),
            new THREE.Vector3(1000,1000,0),
            new THREE.Vector3(300,1000,0)
        ];

        well.geometry.vertices = well.geometry.vertices.concat(hole);
        well.geometry.faces = [];

var triangles = THREE.Shape.Utils.triangulateShape ( well.geometry.vertices, hole );

    for( var i = 0; i < triangles.length; i++ ){

        well.geometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));
        well.geometry.faceVertexUvs[ 0 ][i] = THREE.ExtrudeGeometry.WorldUVGenerator.generateTopUV(well.geometry, triangles[i][0], triangles[i][1], triangles[i][2]);

}

但结果我得到了一些奇怪的东西：在控制台输出“无限循环！剩下的洞：4，可能是形状外的洞！”在桌面上我得到https://yadi.sk/i/WHRzH7c2jnaRm 有人能告诉我我的代码有什么问题吗？

Answer 1

经过几天的游戏，我发现了什么是错的： 1. THREE.Shape.Utils.triangulateShape 期望顶点和孔是相同形状的部分。 2.孔应该不是点数组而是路径数组。 3.三角测量后应顶点顶点。所以正确的结果是：

....
var holePoints = [
            new THREE.Vector3(300,300,0),
            new THREE.Vector3(1000,300,0),
            new THREE.Vector3(1000,1000,0),
            new THREE.Vector3(300,1000,0)
        ],
hole = new THREE.Path();
hole.fromPoints(holePoints);

var shape = new THREE.Shape(well.geometry.vertices);
shape.holes = [hole];
var points = shape.extractPoints();
well.geometry.faces = [];

var triangles = THREE.Shape.Utils.triangulateShape ( points.vertices, points.holes );
....

希望有人会发现此信息有用。

THREEJS：为渲染的形状添加洞

1 个答案: