CODEWITHSUNDEEP
javascriptthree.js
Andrea Aloi
Andrea Aloi

Reputation: 991

Issue with double-sided semi-transparent textures

I'm trying to draw a cage-like object onto a canvas using three.js, but I'm probably doing something wrong because the short sides of the cage behave wrong. I managed to create a jsFiddle here.
The front and back are alright (although if you look at the cage from behind, the back texture seems to "erase" the front one as you orbit, even though the floor of the cage is still visible from between the bars) but the short sides are only visible if you orbit around the cage and position the camera in front of them. The code is the same for all sides of the cage (except the floor which is solid gray and the ceiling which is transparent), and it's:

var cageTexture = THREE.ImageUtils.loadTexture(/*omitted, see fiddle*/);
cageTexture.wrapS = THREE.RepeatWrapping;
cageTexture.wrapT = THREE.RepeatWrapping;
cageTexture.repeat.set(10, 1);
var cageFaces = [
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({transparent: true, opacity: 0, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color: "gray", side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide})
];
var cage = new THREE.Mesh(
    new THREE.BoxGeometry(2, 1.5, 1),
    new THREE.MeshFaceMaterial(cageFaces)
);

What am I doing wrong? Click and drag to orbit around the scene to get an idea of the issue I am facing. Feel free to edit the fiddle. Thanks in advance.

Upvotes: 0

Views: 1172

Answers (1)

gaitat
gaitat

Reputation: 12632

One way to achieve what you want is to disable the depthTest as transparent objects are sorted. Sorting is used to attempt to properly render objects that have some degree of transparency. (from the documentation of WebGLRenderer on sortObjects

Here is the fiddle.

Upvotes: 2

Related Questions