Three.js / WebGL - transparent planes hiding other planes behind them

javascript three.js webgl depth zbuffer
MaiaVictor picture MaiaVictor · Jun 23, 2012 · Viewed 20.9k times · Source

When you have two planes in Three.js / WebGL and one or both of them are transparent, sometimes the plane behind will be hidden by the transparent plane above. Why is this?

Answer

Alex Under picture Alex Under · Dec 6, 2012

Let's say that you are using some transparent *.png image. Then this would help: 

new THREE.MeshBasicMaterial( { side:THREE.BackSide,map:texture, depthWrite: false, depthTest: false });

Related questions

How to stop a requestAnimationFrame recursion/loop?

I'm using Three.js with the WebGL renderer to make a game which fullscreens when a play link is clicked. For animation, I use requestAnimationFrame. I initiate it like this: self.animate = function() { self.camera.lookAt(self.scene.position); self.…

Read More
How to detect collision in three.js?

I am using three.js. I have two mesh geometries in my scene. If these geometries are intersected (or would intersect if translated) I want to detect this as a collision. How do I go about performing collision detection with …

Read More
Three.js - Change Material on Runtime

I have some .js files exported from Blender and load them with THREE.JSONLoader(); my callback: var callback = function( geometry ) { createMesh(geometry); my loading: loader.load( "Models/sculp.js", callback ); my create method: function createMesh(geometry){ inArr[id] = new THREE.…

Read More