How to Create Multiple Viewport Scenes Using Only Three.js

Questions
,
1

Hi everyone,

I’m working on a project with Three.js, and I’m aiming to implement the following features:

  1. Create a 3D free-rotating scene using PerspectiveCamera.
  2. Create an orthographic view that simulates a 2D vertical-axis scene using OrthographicCamera.
  3. The scene should support arbitrary changes in the six directional axes (e.g., front, back, left, right, top, and bottom views).
  4. Ensure that when camera.up changes, all view transformations are handled correctly.

I would like to know how to achieve this functionality using only Three.js, without relying on third-party libraries.

To provide a clearer understanding, here’s a similar demo that was implemented using a third-party library, which you can check out here:
Multiple Views Demo

Thank you in advance for your help and guidance!

2

there is nothing that i am aware of except three.js examples but it’s fairly basic and you will face hundreds of issues before completing a real world project. from isolation to cross browser issues, canvas and dom both receiving events and so on. i developed the view component for drei, and it cost me maybe 2-3 months work to get it anywhere near flawless.

with that kind of complexity imo it’s not feasible to do this only in threejs. just the management of the state changes (camera et al) alone would be a nightmare in vanilla js.

if you still want to attempt, the link above will get you going.