Multiple transparent planes on different heights

At the moment I am trying to design a viewer to display different heights.

In 2D no problem, but with threejs I unfortunately didn’t make it.
My goal is to display everything between 15-14.5m in green, 14.5 - 13.5m in yellow and everything below 13.5m in red.

Here is an example of the 2D viewer.

So far I have added 3 planes each with a transparency and the color. Of course the colors mix which makes identification very difficult.

So I tried to solve the problem with renderOrder, but this was the wrong approach.

You could do it like so: three.js dev template - module - JSFiddle - Code Playground

The idea is to enhance a built-in material via onBeforeCompile(). In the vertex shader, you compute the height of each vertex in world space (it’s y coordinate) and pass it as a varying in the fragment shader. You then use the interpolated height values to color each fragment with your color pallet. You could enhance the shader even more by making your three color values to uniforms (instead of hard coding the colors in the fragment shader).

1 Like

Thanks for your example!
However, the texture of the 3d tiles (here I use GitHub - nytimes/three-loader-3dtiles: This is a Three.js loader module for handling OGC 3D Tiles, created by Cesium. It currently supports the two main formats, Batched 3D Model (b3dm) - based on glTF Point cloud.) should still be preserved and only a transparent “veil” should be put over it…

My problem was that the transparent planes “add up”…