Im creating a game with React and Three.js and vanilla Javascript, i have several clases, representing objects in the game, do i need to create a camera, scene, renderer for each class or i simply share the canvas for every class?

  • \$\begingroup\$ What happens when you try to re-use one camera, scene, renderer? \$\endgroup\$
    – DMGregory
    Commented May 17, 2022 at 23:00
  • \$\begingroup\$ Not very shure, for what i have seen WebGL complains about it @DMGregory \$\endgroup\$ Commented May 17, 2022 at 23:02
  • 2
    \$\begingroup\$ Make a small test - what we call a Minimal Complete Verifiable Example - and share the exact code you use and the exact error message you get. Otherwise, us telling you "you can share a camera, renderer, and scene" doesn't actually help you solve that problem. \$\endgroup\$
    – DMGregory
    Commented May 17, 2022 at 23:04

1 Answer 1


So i found some code and implemented it to my own needs, i have also added Physics with cannon-es, but anything is posible.

import * as THREE from 'three';

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import * as CANNON from 'cannon-es'

class Floor{
  constructor(game, world){
    this.assetsPath = game.assetsPath;
    //this.loadingBar = game.loadingBar;
    this.game = game;
    this.scene = game.scene;
    this.tmpPos = new THREE.Vector3();

  get position(){
    if (this.plane!==undefined) this.plane.getWorldPosition(this.tmpPos);
    return this.tmpPos;

  set visible(mode){
    this.plane.visible = mode;
    const textureLoader = new THREE.TextureLoader()
    const texturePlane = textureLoader.load(
        './AiCourse Models/Texturas/grass.jpg',
        () =>
          console.log('loading finished')
        () =>
          console.log('loading progressing')
        () =>
          console.log('loading error')

    const geometry  = new THREE.PlaneGeometry(1000,1000,400)
    const material  = new THREE.MeshBasicMaterial({map: texturePlane})
    const floor = new THREE.Mesh( geometry, material )
    floor.receiveShadow = true
    floor.rotation.x = - Math.PI * 0.5

    const floorBody = new CANNON.Body()
    const floorShape = new CANNON.Plane()
    floorBody.mass = 0
    floorBody.quaternion.setFromAxisAngle(new CANNON.Vec3(- 1, 0, 0), Math.PI * 0.5)


    world.step(1 / 60, deltaTime, 3)

export { Floor };

This way i pass game data to any class/component i wish, i was attempting to do it in a similar way. Hope this helps someone. In the class constructor i pass all game class data, a game class returning this data in the constructor will do (that is scene object, renderer, camera etc) simply pass this keyword in class. For the Physics with cannon, create a global world variable and set it up (establish gravity, etc) Well at least this is my solution but it works.

  • \$\begingroup\$ Can you summarize what answer you found to the question "do I share camera, scene objects"? \$\endgroup\$
    – DMGregory
    Commented May 22, 2022 at 19:39
  • \$\begingroup\$ It was a little of experience also, but in the class constructor i pass the game data (Where i create my scene, camera, renderer) so a game class with that will work and only pass a this keyword in this class constructor, hope this answers your question \$\endgroup\$ Commented May 22, 2022 at 19:49
  • \$\begingroup\$ For Physics define a global world cannon variable and pass that also to the class constructor \$\endgroup\$ Commented May 22, 2022 at 19:59
  • \$\begingroup\$ Make sure that's stated clearly in your answer. \$\endgroup\$
    – DMGregory
    Commented May 22, 2022 at 20:50
  • \$\begingroup\$ Don't forget to click the checkmark in the upper left to mark this answer as Accepted if it solved your problem. \$\endgroup\$
    – DMGregory
    Commented Jun 22, 2022 at 12:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .