CODEWITHSUNDEEP
javascriptopengl-esthree.js
prisoner849
prisoner849

Reputation: 17596

Three.js - Mesh, triangles and Lambert material

I have a function where I make a star, here we go:

function CreateStar( radius, thickness, isWireframe, starColor) {

            // material
            var starMaterial = new THREE.MeshLambertMaterial({
                    color: starColor,
                    wireframe: isWireframe,
                    shading: THREE.FlatShading
                  });

            // array for vertices
            var vertices = [];
            // set "zero" vertex for thickness
            vertices.push( new THREE.Vector3(0, 0, thickness) );

            // calculate a vertex and a pit for a half of a ray... 5 times for each 72 degrees
            var deg = Math.PI / 180; // for me it's easier to work with degrees rather than radians
            var maxR, minR; 
            maxR = radius; // radius for a vertex
            var  x4Rad = maxR * Math.cos( - 72 * deg );
            minR = x4Rad/Math.cos( - 36 * deg ); // radius for a pit
            var firstVertex;

            for ( var i = 0; i < 5; i++ ){

                // vertex
                var vertX = maxR * Math.cos( (90 + (72 * i)) * deg );
                var vertY = maxR * Math.sin( (90 + (72 * i)) * deg );
                if ( i == 0 ) firstVertex = new THREE.Vector3( vertX, vertY, 0 );
                vertices.push( new THREE.Vector3( vertX, vertY, 0 ));

                // pit
                var pitX = minR * Math.cos( (126 + (72 * i)) * deg );
                var pitY = minR * Math.sin( (126 + (72 * i)) * deg );
                vertices.push( new THREE.Vector3( pitX, pitY, 0 ));
            }
            vertices.push( firstVertex ); // add the first vertex again to close the contour of the star

            var holes = []; // no holes in our contour
            var triangles, star;
            var geometry = new THREE.Geometry();

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

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

            star = new THREE.Mesh( geometry, starMaterial );
            //star = new THREE.Mesh( new THREE.CubeGeometry(200,200,200), starMaterial);
            return star;
}

My problem is when I return a cube (commented in this code) from this function and add to a scene, I get exactly a cube with correct shades which depend on position of a directional light source, but, when I return a star and add it to the scene, I get... hm.. just a black star with no color (it's black), no shades... nothing. So why I can apply a material to the cube, but I can't apply it to the star?

Can anybody explain to me what I'm going wrong?

Three.js r68

Upvotes: 1

Views: 581

Answers (1)

Benedikt
Benedikt

Reputation: 787

Maybe you just need to recalculate your normals. Try :

    geometry.computeFaceNormals();
    geometry.computeVertexNormals();
    star = new THREE.Mesh( geometry, starMaterial );

Upvotes: 3

Related Questions