是否可以阻止这些面部渲染？

Question

我已经开始了一个基于立方体的三人游戏，并且在渲染块中的​​透明度方面遇到了一些麻烦。

我正在从JSON文件中加载块，其中每个块的结构如下所示：

{
    'sprite': 'water.png',
    'collides': false,
    'moves': false,
    'transparent': true
}

然后从我们的渲染器和透明值在渲染器中创建纹理。

var texture = THREE.ImageUtils.loadTexture('/img/' + 
    _materials[i].sprite);

var properties = {
    map: texture
};

if(_materials[i].transparent) {
    properties.opacity = 0.3;
    properties.transparent = true;
}

materials[i] = new THREE.MeshBasicMaterial(properties);

以前对水的定义看起来像这样。

您可以看到其他水块的面，通过它们上方和旁边的水块。是否可以防止这种情况发生？

Answer 1

最简单的解决方案是使用多材质进行CubeGeometry。

这样做：

var texture = THREE.ImageUtils.loadTexture('/img/' + 
    _materials[i].sprite);

var properties = {
     map: texture
};
// hidden faces texture with opacity to 0
var hMat = new THREE.MeshBasicMaterial({color:0xFFFFFF, transparent:true, opacity:0});


if(_materials[i].transparent) {
    properties.opacity = 0.3;
    properties.transparent = true;
}

matWater = new THREE.MeshBasicMaterial(properties);

var finalMat = new THREE.MeshFaceMaterial([ hMat, hMat, matWater, hMat, hMat, hMat]);
// I guess indice 2 is the top face , depend the cube orientation.

var mesh = new THREE.Mesh(CubeGeo, finalMat);

问候。