Recently, I've been working on a cube-based game using three.js and encountered an issue with rendering transparency in blocks.
These blocks are loaded from a JSON file, where each block is defined like this:
{
'sprite': 'water.png',
'collides': false,
'moves': false,
'transparent': true
}
To handle transparency, I create textures in the renderer based on the sprite and transparent value of each block.
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);
The issue arises when trying to render water blocks, as you can see the faces of adjacent blocks through transparent ones. Any suggestions on how to prevent this from occurring?