using renderOrder in three.js

three.js render overlap zbuffer
nebeleh picture nebeleh · May 23, 2015 · Viewed 7.6k times · Source

I want to have two overlapping objects in a scene but I want to define which object should be drawn first. I have a sample of the code here: http://jsfiddle.net/sg02e5sm/1/

I'm using renderOrder = 1 for the second object to make it appear always on top of the first object (as long as they have the same Z value), but it's not working.

Answer

WestLangley picture WestLangley · May 23, 2015

renderOrder does not make something appear "on top". It controls the order in which objects are rendered.

If you want your 2nd plane to be "on top", you can add

mesh.material.depthTest = false;

for the 2nd plane, for example.

fiddle: http://jsfiddle.net/sg02e5sm/2/

Alternatively, you can implement two render passes, as described in this SO answer.

three.js r.71

Related questions

Antialiasing not working in Three.js

I am new to three.js and have starting working with it a lot recently. I really enjoy it and I have created some incredible things. However, I'm unsure why but when setting antialiasing to true I see no difference. …

Read More
"Cross origin requests are only supported for HTTP." error when loading a local file

I'm trying to load a 3D model into Three.js with JSONLoader, and that 3D model is in the same directory as the entire website. I'm getting the "Cross origin requests are only supported for HTTP." error, but I don't …

Read More
Changing three.js background to transparent or other color

I've been trying to change what seems to be the default background color of my canvas from black to transparent / any other color - but no luck. My HTML: <canvas id="canvasColor"> My CSS: <style type="text/…

Read More