How to change the way shading looks on cubes in Three.js?

I’m creating a little game using Three.js and everything is going well apart from shome shading issues with cubes. I’m basically building a game level by just dropping textured cubes down to form a maze. The problem is that when the cubes are next to one another, each one is shaded in such a way that it looks as if it’s a separate entity and not part of a larger wall.

Here is an example, notice the illusion of a single wall is lost:

Is there a different shading technique i should use or is there a nice property to be set somewhere to change this shading behavior?

This is my cube model:

    {

        "metadata" :
        {
            "formatVersion" : 3,
            "generatedBy"   : "Blender 2.60 Exporter",
            "vertices"      : 8,
            "faces"         : 6,
            "normals"       : 8,
            "colors"        : 0,
            "uvs"           : 4,
            "materials"     : 1,
            "morphTargets"  : 0
        },

        "scale" : 1.000000,
        "materials": [{
            "DbgColor" : 15658734,
            "DbgIndex" : 0,
            "DbgName" : "WallCube",
            "colorAmbient" : [1.0, 1.0, 1.0],
            "colorDiffuse" : [1.0, 1.0, 1.0],
            "colorSpecular" : [0.15, 0.15, 0.15],
            "mapDiffuse" : "../../textures/walls/stone/stone.png",
            "mapDiffuseWrap" : ["repeat", "repeat"],
            "mapNormal" : "../../textures/walls/stone/stone_normal.png",
            "mapNormalFactor" : 1.0,
            "shading" : "Lambert",
            "specularCoef" : 25,
            "transparency" : 1.0,
            "vertexColors" : false
        }],

        "vertices": [50.000000,-50.000000,-50.000000,50.000000,-50.000000,50.000000,-50.000000,-50.000000,50.000000,-50.000000,-50.000000,-50.000000,50.000000,50.000000,-50.000000,50.000000,50.000000,50.0000050,-50.000000,50.000000,50.000000,-50.000000,50.000000,-50.000000],

        "morphTargets": [],

        "normals": [1.000000,-1.000000,-1.000000,1.000000,-1.000000,1.000000,-1.000000,-1.000000,1.000000,-1.000000,-1.000000,-1.000000,1.000000,1.000000,-1.000000,-1.000000,1.000000,-1.000000,-1.000000,1.000000,1.000000,1.000000,1.000000,1.000000],

        "colors": [],

        "uvs": [[0.000000,1.000000,1.000000,1.000000,1.000000,0.000000,0.000000,0.000000]],

        "faces": [43,0,1,2,3,0,0,1,2,3,0,1,2,3,43,4,7,6,5,0,0,1,2,3,4,5,6,7,43,0,4,5,1,0,1,2,3,0,0,4,7,1,43,1,5,6,2,0,1,2,3,0,1,7,6,2,43,2,6,7,3,0,1,2,3,0,2,6,5,3,43,4,0,3,7,0,3,0,1,2,4,0,3,5]

    }

and this is how i load it:

    JSONLoader = new THREE.JSONLoader();

    Light = new THREE.PointLight(0xFFFFFF);
    Light.position = {x:0, y:75, z:350};

    Meshes = [];
    JSONLoader.load("../assets/models/cube.js", function(Geometry)
    {
        for (var MeshIndex = 0; MeshIndex <= 5; MeshIndex++)
        {
            Meshes[MeshIndex] = new THREE.Mesh(Geometry, new THREE.MeshFaceMaterial());
            Meshes[MeshIndex].position.x = MeshIndex * 100;
            Scene.add(Meshes[MeshIndex]);
        }
    });

    Scene.add(Light);

Any ideas how to make the cubes look like a continuous wall?

[mrdoob]

Good point…

[alteredq]

It’s actually here in Loader (and somehow already used for other purpose 😉

https://github.com/mrdoob/three.js/blob/master/src/extras/loaders/Loader.js#L195

Probably could be shading => type and then shading could be reclaimed for flat / smooth.

Though this whole “shading” business is somehow messy, one of the things that keep bugging me.

Not sure if we shouldn’t drop whole flat / smooth labels and start calling this feature with real names => face and vertex normals.

“Smooth shading” just means to use vertex normals, it doesn’t guarantee shading will be smooth (this is pretty confusing when vertex normals in the model are baked as flat).