Threejs sprite ordering

Question

I'm having an issue rendering sprites using Three.js, to complicate the issue further I'm using a game engine voxel.js to manage the instance.

Example: http://christopherdebeer.com/sandbox/voxeljs/

I've tried messing with depth{write|test}:

material = new game.THREE.SpriteMaterial({
  map: spriteB, 
  useScreenCoordinates: false,
  alignment: game.THREE.SpriteAlignment.bottomCenter,
  color: 0xffffff,
  fog: true,
  depthWrite: true,
  depthTest: false
});

for the semi transparent meshes on the left of the example.

What I need is a transparent mesh or voxel to give a volume of space some substance while displaying a 2d sprite at that position.

How can I solve this issue, or what am I doing wrong?

Answer 1

This is almost exactly a year after you needed it, but @WestLangley described how sprites are rendered last and thus do not play well with transparent objects. He provides some tips on working around this.

three.js - cannot view a sprite through a mesh with transparency?

Answer 2

It seems to be an alpha test missing to me: try to add the parameter alphaTest: 0.5 to the parameters you pass to the SpriteMaterial and see if it helps (try with depthTestset to true)