# Threejs multiple scenes with dedicated cameras

**URL:** <https://discourse.threejs.org/t/threejs-multiple-scenes-with-dedicated-cameras/58888>\
**Category:** Questions\
**Tags:** scene, camera\
**Created:** [December 4, 2023, 7:51pm UTC](https://discourse.threejs.org/t/threejs-multiple-scenes-with-dedicated-cameras/58888 "2023-12-04T19:51:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaFrenchFrog](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dafrenchfrog/32/42644_2.png) [@DaFrenchFrog](https://discourse.threejs.org/u/DaFrenchFrog)\
**Post date:** [December 4, 2023, 7:51pm UTC](https://discourse.threejs.org/t/threejs-multiple-scenes-with-dedicated-cameras/58888/1 "2023-12-04T19:51:49Z")

</div>

I want to use a single canvas for several totally different scenes for a website. The most clean solution I found is to make custom scene classes in which I’d add a camera, and I’d render the corresponding scene using a public property “camera” of my custom scene. Basic implementation looks like this :

CustomScene1.js

```javascript
//... imports

export class CustomScene1 extends THREE.Scene {
     constructor() {
		super();
		this.camera = new THREE.PerspectiveCamera(25,window.screenWidth / window.screenHeight,0.1,1000);
        // instantiate 3D objects...
        this.add(meshes);
	  }
      //Do the scene stuff...
}

```

Main.js

```javascript
import { CustomScene1 } from '../CustomScene1';
import { CustomScene2 } from '../CustomScene2';

cScene1 = new CustomScene1();
cScene2 = new CustomScene2();
showScene1 = true;
camera = new THREE.PerspectiveCamera(25,window.screenWidth / window.screenHeight,0.1,1000);
//
const animate = () => {
     requestAnimationFrame(animate);
     if(showScene1) {
          renderer.render(cScene1, cScene1.camera); // NOT OK
          renderer.render(cScene1, camera); // OK
      } else {
          renderer.render(cScene2, cScene2.camera);
     }
}

```

To embedding the camera inside the scene feels much more cleaner as the cameras have specific behaviours I don’t want to mix.

PROBLEM : My problem is that if in the render() call I use the camera contained in the customScene nothing shows, but if I create a camera in the Main and use it then it works…

Any idea why ? Or shoud I should another structure ?

Thx a lot for your help

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [December 4, 2023, 8:13pm UTC](https://discourse.threejs.org/t/threejs-multiple-scenes-with-dedicated-cameras/58888/2 "2023-12-04T20:13:53Z")

</div>

I tried your code and It seems to be working fine [here](https://jsfiddle.net/k73jL0zv/), and that’s the expected behavior.

Are you sure you’re not updating the scene’s camera properties somewhere else in your code, position, aspect, fov … It could be anything offsetting the camera position or viewport

---

<div class="post-metadata">

**Author:** ![DaFrenchFrog](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dafrenchfrog/32/42644_2.png) [@DaFrenchFrog](https://discourse.threejs.org/u/DaFrenchFrog)\
**Post date:** [December 4, 2023, 9:03pm UTC](https://discourse.threejs.org/t/threejs-multiple-scenes-with-dedicated-cameras/58888/3 "2023-12-04T21:03:40Z")

</div>

Great ! The problem was indeed elsewhere… You made me look for it so thank you for your quick help 🙏 🙏 🙏