THREEJS: add hole to rendered Shape

问题

I'm trying to inject hole to the shape that is already added to the scene, but some thing going wrong... so in details: the shape

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

}

but as result i got something strange: in console output "Infinite Loop! Holes left:4, Probably Hole outside Shape!" and on desktop i got https://yadi.sk/i/WHRzH7c2jnaRm could someone tell me what is wrong in my code?

回答1:

after few days play around I found what is wrong: 1. THREE.Shape.Utils.triangulateShape expect vertices and holes to be parts of same shape. 2. hole should be not the array of points but array of path. 3. vertices should be concated after triangulation. so correct result is:

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

Hope someone will find this info helpful.

来源：https://stackoverflow.com/questions/33176150/threejs-add-hole-to-rendered-shape

标签

three.js