HIGH LEVEL ThreeJS Optimal setup

Questions
,
1

Codepen “example” here

So its really hard for me to explain this, but I’m trying to learn what the best setup for a bunch(6 different full screen panels) of threejs scenes like this would be?

Each scene(fullscreen color) in the codepen linked above is technically a 3D scene with controls that the user can interact with, and when they scroll they will technically see 2 different scenes. But the scenes do not bleed into eachother or have anything to do with eachother (despite sharing a lot of the same logic).

I know in some cases its best to have a SINGLE threeJS canvas and have it sticky to the users scrolling, and just fake the scrolling in threejs. but would that apply here as well?

I’m not looking for any code, just high level setup to help point me in the optimal direction so i don’t lock myself into a design choice. the timeline for this project is tight

these are examples, i have no idea whats correct but stuff like

  • have 1 camera per scene, and 1 renderer
  • make 6 instances of webgl renderers. (bad imo)
2

I guess I would try the approach from the following example first: three.js webgl - multiple canvases - grid

  • You only have a single instance of WebGLRenderer.
  • Each view is represented as an instance of the View class. When you render a view, it copies the contents from the renderer`s internal canvas to its own canvas element. The relevant call is for this is:
context.drawImage( renderer.domElement, 0, 0 );
  • The example uses just a single scene. However, you can enhance the View class by a scene property so each view holds its own scene.
2 Likes
3

Finally got it implemented! Had to do

context.drawImage( renderer.domElement, 0, 0, elementWidth, elementHeight );

ty for the assistance! I really appreciate your hard work!