Multiple transparent planes on different heights

Questions
,
1

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.

2dViewer
2dViewer982×682 56.7 KB

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

3dViewer
3dViewer1219×828 71 KB

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

2

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
3

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”…