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. Please help me guys. Thanks.

OK I found something

const canvas = document.querySelector('canvas.webgl')

the above 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.