Three.js: Creating a mesh from Vertices

[unreturnable]

I'm trying to create a Mesh from vertices using this code:

getMeshFromVertices = function(vertices, holes) {
        var triangles, mesh;
        var geometry = new THREE.Geometry();
        var material = new THREE.MeshBasicMaterial();

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

        for( var i = 0; i < triangles.length; i++ ){
            geometry.faces.push(new THREE.Face3(triangles[i][0], triangles[i][1], triangles[i][2]));
        }

        return new THREE.Mesh(geometry, material);
    }

But when I do this I get this error:

Uncaught TypeError: contour.concat is not a function
THREE.Shape.Utils.triangulateShape @ three.js:29200

When I go to that line in the Three.js source I discover this is what its trying to do:

var allpoints = contour.concat();

Which isn't ever going to work. There is a similar problem on line 29254.

return triangles.concat();

All of this is taken from revision 71.

[WestLangley]

Hmmm. The call to concat() without args was added to Shape.js in r.66...

[unreturnable]

I think I might have found the source of the issue, my data I'm feeding into that method changes and is some times formatted oddly. Sorry for being over eager to report and issue, although I'm still confused as to what the purpose of those lines of code is.

[WestLangley]

I'm still confused as to what the purpose of those lines of code is.

Me too.

/ping @zz85

[makc]

concat without arguments = shallow clone of array. but this:

        var allpoints = contour.concat();

        for ( var h = 0, hl = holes.length; h < hl; h ++ ) {

            Array.prototype.push.apply( allpoints, holes[h] );

        }

suggests that contour is not expected to have push method, how can it have concat then? which is exactly what error message says

contour.concat is not a function

but Array.prototype.concat.apply would not work (in firefox at least), you need Array.prototype.slice.apply

[zz85]

yes bla.concat() returns a copy of the array. Array.prototype.push seems to be introduced in commit 4b144ff31bfa814f264ec35e55de0d98051f2ac1. I don't remember why it is used. Maybe we can reopen this issue.

[WestLangley]

@zz85 Reopened, as requested. Do you mind having a further look?

[zz85]

sorry it took awhile, but it looks like the functionality in the code is correct. holes is a nested array of vector like [ [ v1, v2... ] ].

for ( var h = 0, hl = holes.length; h < hl; h ++ ) {

            Array.prototype.push.apply( allpoints, holes[h] );

        }

is a shortcut for

for ( var h = 0, hl = holes.length; h < hl; h ++ ) {
   var list = holes[h];
    for ( var i = 0; i < list; i++ ) {
       allpoints.push( list[ i ] )
    }
}

or expanding to allpoint.push(holes[h][0], holes[h][1], holes[h][2]...)

which could also be written as allpoints.push.apply( allpoints, holes[h] ); (i believe now slightly easier to understand?)

[bag-man]

@unreturnable Hi, I came across this code looking for something else, would you know if THREE.Shape.Utils is still available in r82?

As I don't seem to have access to it, with just three.js, do I need to include another lib?

[mrdoob]

It is now THREE.ShapeUtils.

[bag-man]

Nice one thanks, can't find it in the docs anywhere though!

[Mugen87]

@bag-man Docs were added by @looeee with #10042