Jewel and Ball

These two objects are the same geometry and the same material and lighting. The only difference is that one uses smooth shading (interpolating colors across each face) and the other uses flat shading (one uniform color per face). The yellow spikes show the face normals.

Parameters

The detail parameter is how much detail in the underlying sphere geometry. The more detail, the more vertices in each.

The computeVertexNormals checkbox is whether to invoke the Three.js computeVertexNormals() method on the ball geometry. That method averages the face normals to figure out the vertex normals, which is appropriate for smooth objects. It doesn't seem to have much effect, though, unless the detail is very small. Interpolating color is more powerful than interpolating normals.

The "sameGeom" checkbox shows that, even though these two objects use the exact same sphere for their geometry, you should create different geometry objects, rather than use a shared one. In code, do this:

    ballgeom  = new THREE.SphereGeometry( radius, params.detail, params.detail );
    jewelgeom  = new THREE.SphereGeometry( radius, params.detail, params.detail );
    ball  = new THREE.Mesh( ballgeom, ballMaterial );
    jewel = new THREE.Mesh( jewelgeom, jewelMaterial );

not this:

    geom  = new THREE.SphereGeometry( radius, params.detail, params.detail );
    ball  = new THREE.Mesh( geom, ballMaterial );
    jewel = new THREE.Mesh( geom, jewelMaterial );

Code

The code for the objects: