I have a function that generates stars, here is the code:
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 vertices and pits for a star shape
var deg = Math.PI / 180; // working with degrees for simplicity
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 );
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 );
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 );
return star;
}
After running this function, I encountered an issue. When I return a cube (commented in the code) and add it to the scene, everything works as expected with correct shading based on the light source. However, when I return a star and add it to the scene, I only see a black star with no color or shading. Why is it that I can apply a material to the cube but not to the star?
If anyone can provide some insight on what I might be doing wrong, I would greatly appreciate it.
Using Three.js r68