How do I render different scenes on different sections of a page?

Questions
1

I am a novice, especially in Three.js and sometimes it is very difficult to formulate these questions. So, basically, what I want to do is to render a particular scene on let’s say section1 of the page, let’s call that scene1, then, I also want to render a diffrent scene (scene2) on section2 of the same page. So the user will scroll to that section of the page to see that scene. Just like you have the HEADER section of a page, then you also have the maybe, the FOOTER scetion, all in the same page, but with diffrent things in them. I am only able to render one scene and on just one section of the page.

const canvas = document.querySelector('canvas.webgl')//this code is to get the canvas, right?

const scene1 = new THREE.Scene()//   this one is for creating scene1

const renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true })// this code is the code for rendering scene1.
So how do I render a different scene on another section or div, on the same page.

Thanks.

2

you can cut the view into pieces with renderer.setScissorTest(true). three.js examples, or three.js examples

there are many other ways but it’s hard to answer without knowing requirement: events yes or no, a single canvas that stretches 100%/100%, are multiple canvases allowed, how many separate views, …

1 Like
3

/cc

4

Do you mean something like this?

From the Collection of examples from discourse.threejs.org

scene comparison
ConstructionBasis

and

Construction of frames with contour/profile
ConstructFrame

5

Thanks. It is more like the first one. Thanks