THREEJS：为渲染的形状添加孔答案

【问题标题】：THREEJS: add hole to rendered ShapeTHREEJS：为渲染的形状添加孔
【发布时间】：2017-06-18 21:38:19
【问题描述】：

我正在尝试向已添加到场景中的形状注入孔，但出现了一些问题...... 所以详细地说：形状

        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 有人能告诉我我的代码有什么问题吗？

【问题讨论】：

标签： three.js

【解决方案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 );
....

希望有人会发现此信息有帮助。

【讨论】：