如何更改Three.js中立方体的着色方式?

如何更改Three.js中立方体的着色方式?,three.js,shader,Three.js,Shader,我正在使用创建一个小游戏,除了立方体的shome着色问题之外,一切都进行得很顺利。我基本上是通过把有纹理的立方体放下来形成一个迷宫来建立一个游戏级别。问题是,当立方体彼此相邻时,每个立方体都会以这样的方式着色,使其看起来像是一个单独的实体,而不是更大的墙的一部分 下面是一个示例,请注意,单面墙的幻觉消失了: 我是否应该使用不同的着色技术,或者是否可以在某个地方设置一个好的属性来更改此着色行为 这是我的多维数据集模型: { "metadata" : { "for

我正在使用创建一个小游戏,除了立方体的shome着色问题之外,一切都进行得很顺利。我基本上是通过把有纹理的立方体放下来形成一个迷宫来建立一个游戏级别。问题是,当立方体彼此相邻时,每个立方体都会以这样的方式着色,使其看起来像是一个单独的实体,而不是更大的墙的一部分

下面是一个示例,请注意,单面墙的幻觉消失了:

我是否应该使用不同的着色技术,或者是否可以在某个地方设置一个好的属性来更改此着色行为

这是我的多维数据集模型:

{

    "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]

}
这就是我加载它的方式:

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);
JSONLoader=new THREE.JSONLoader();
灯光=新的三点灯光(0xFFFFFF);
Light.position={x:0,y:75,z:350};
网格=[];
JSONLoader.load(“../assets/models/cube.js”,函数(几何体)
{
对于(var MeshIndex=0;MeshIndex
在three.js网站上的alteredq对此做出了善意的回答

JSONLoader.load("../assets/models/cube.js", function(Geometry)
{
    Geometry.materials[ 0 ].shading = THREE.FlatShading;

    // ...
}