"Four-up" layout in three.js | three 2D views and one 3D view

Questions
1

Hey!
So I’m working on a viewer that needs to display 3D data from a .nrrd file in multiple 2D viewports (X, Y, Z), as well as a surface mesh in a 3D viewport. It’s similar to how 3D Slicer works:

image
image1304×895 163 KB

I found an example that shows how to slice NRRD data along different axes.

What is the best way to create this four-viewport layout? Also, all these viewports must be interactive, allowing slice changes, panning, and zooming with the mouse. Is it a good idea to use multiple renderers, scenes, and cameras? I also saw that WebGLRenderer.setViewport can handle this kind of setup.

Thanks in advance for the help!

2

try scissorTest method three.js examples

4 Likes
3

Thanks! Looking at this example, and the one in three.js docs: Three.js - Cameras - Perspective 2 views I learned how it works.

1 Like