Question

I am trying to build my own three.js geometry. However, when I try to define it, like this:

geometry = new THREE.FreeWallGeometry( 3, 5 );

I get the error “TypeError: v is undefined” from the function addSelf at line 714 in three.js.

How do I find out what triggers this error?

This is the current code for my homemade geometry:

define(
    [   "libs/three.js/build/three",
    ],
    function (
        three
        ) {

        console.log("setting up makeControls. regards, makeControls");

        //THREE.FreeWallGeometry = function ( length, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides ) {

        // X = length, Y = height, Z = depth,
        THREE.FreeWallGeometry = function ( noOfSegments, segmentLength ) {

            THREE.Geometry.call( this );

            var t1, t2,
            normal = new THREE.Vector3( 0, 0, 1);
            freePlane;

            var freePlane = function ( self, parametricPlane_X, parametricPlane_Y, parametricPlane_Z, equidistantSampler_T1, equidistantSampler_T2 ) {

                for ( t2 = 0; t2 < noOfSegments; t2 ++ ) {

                    for ( t1 = 0; t1 < noOfSegments; t1 ++ ) {

                        console.log("free: t1, t2 ", t1, t2);
                        //var x = t1 * segmentT1_length - length_half;
                        //var y = t2 * segmentT2_length - height_half;
                        var x = parametricPlane_X ( t1, t2 );
                        var y = parametricPlane_Y ( t1, t2 );
                        var z = parametricPlane_Z ( t1, t2 );

                        console.log("free: x, y z ", x, y, z);

                        self.vertices.push( new THREE.Vector3( x, - y, z ) );

                    }

                }

                for ( t2 = 0; t2 < noOfSegments; t2 ++ ) {

                    for ( t1 = 0; t1 < noOfSegments; t1 ++ ) {

                        var a = t1 + noOfSegments * t2;
                        var b = t1 + noOfSegments * ( t2 + 1 );
                        var c = ( t1 + 1 ) + noOfSegments * ( t2 + 1 );
                        var d = ( t1 + 1 ) + noOfSegments * t2;



                        //console.log ("free: a, b, c, d ", a, b, c, d);

                        var face = new THREE.Face4( a, b, c, d );

                        if (!self.vertices[face.a]) {
                            console.log("this face.a can't index vertices: ", face.a);
                        }

                        if (!self.vertices[face.b]) {
                            console.log("this face.b can't index vertices: ", face.b);
                        }

                        if (!self.vertices[face.c]) {
                            console.log("this face.c can't index vertices: ", face.c);
                        }

                        if (!self.vertices[face.d]) {
                            console.log("this face.d can't index vertices: ", face.d);
                        }

                        face.normal.copy( normal );
                        face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone(), normal.clone() );

                        self.faces.push( face );
                        self.faceVertexUvs[ 0 ].push( [
                            new THREE.UV( t1 / noOfSegments, 1 - t2 / noOfSegments ),
                            new THREE.UV( t1 / noOfSegments, 1 - ( t2 + 1 ) / noOfSegments ),
                            new THREE.UV( ( t1 + 1 ) / noOfSegments, 1 - ( t2 + 1 ) / noOfSegments ),
                            new THREE.UV( ( t1 + 1 ) / noOfSegments, 1 - t2 / noOfSegments )
                        ] );

                    }

                }

            }


            var parametricPlane_X = function ( t1, t2 ) {
                x = t1;
                return x;
            };

            var parametricPlane_Y = function ( t1, t2 ) {
                y = t1;
                return y;
            };

            var parametricPlane_Z = function ( t1, t2 ) {
                z = t1 * t2;
                return z;
            };

            var equidistantSampler_T1 = function ( t1 ) {
                t1 = Math.sqrt(t1);
                return t1;
            };

            var equidistantSampler_T2 = function ( t2 ) {
                t2 = t2;
                return t2;
            };

            freePlane(this, parametricPlane_X, parametricPlane_Y, parametricPlane_Z, equidistantSampler_T1, equidistantSampler_T2);


            this.computeCentroids();

        };

        THREE.FreeWallGeometry.prototype = Object.create( THREE.Geometry.prototype );

    }
);

Answer 1

You can use Firebugs console.trace() to see which calls went prior to the crash site.

I don’t know if this is typically the case, but in your case console.trace() will show you that the last function call before the call to addSelf, was a call to the function computeCentroids defined around line 4939 in three.js.

In this function, the vertices-array (that your definition of your custom geometry fills with vertices when defined) is indexed by face.a, face.b, face.c and face.d.

These indexes are taken from your geometry’s faces array (which you also filled in yourself in your custom geometry definition) and here problems can occur:

Faces consists of vertices, and if the vertices you generate does not match up with the vertice indexes from the faces you generate, some of your faces vertice indexes might go out of bounds on your vertices array. Thus vertices[face.outOfBoundVerticeIndex] will return null instead of a vertice, leaving you with a hard to find bug.

PS. you might want to make your calls to console.trace conditional on v being undefined, to avoid flooding Firefox with trace calls. This has a tendency to bring Firefox to it’s knee.