我正在使用Three.js创建一个小游戏,除了多维数据集的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);
如何让立方体看起来像连续的墙?
答案 0 :(得分:2)
JSONLoader.load("../assets/models/cube.js", function(Geometry)
{
Geometry.materials[ 0 ].shading = THREE.FlatShading;
// ...
}
在three.js网站上,我们通过alteq来回答这个问题。
https://github.com/mrdoob/three.js/issues/1258#issuecomment-3834489