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:

image

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?

Author: Fantashit

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

Comments are closed.