Camera view in React component

Questions
1

Hi,

I’m trying to use React component :https://www.babylonjs.com.cn/resources/babylonjs_and_reactjs.html#when-would-you-not-want-to-use-react-with-babylonjs
as follows:

import React, { Component } from "react";
import * as BABYLON from 'babylonjs'

/**
 * React component with BabylonJS.
 */
class SceneComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { useWireFrame: false, shouldAnimate: false };
  }

  componentDidMount = () => {
    // start ENGINE
    this.engine = new BABYLON.Engine(this.canvas, true);

    //Create Scene
    this.scene = new BABYLON.Scene(this.engine);

    //--Light---
    this.addLight();

    //--Camera---
    this.addCamera();

    //--Meshes---
    this.addModels();

    //--Ground---
    this.addGround();

    // Add Events
    window.addEventListener("resize", this.onWindowResize, false);

    // Render Loop
    this.engine.runRenderLoop(() => {
      this.scene.render();
    });

    //Animation
    this.scene.registerBeforeRender(() => {
      this.boxMesh.rotation.y += 0.01;
      this.boxMesh.rotation.x += 0.01;
    });
  };

  componentWillUnmount() {
    window.removeEventListener("resize", this.onWindowResize, false);
  }

  onWindowResize = event => {
    this.engine.resize();
  };

  /**
   * Add Lights
   */
  addLight = () => {
    //---------- LIGHT---------------------
    // Create a basic light, aiming 0,1,0 - meaning, to the sky.
    var light = new BABYLON.HemisphericLight(
      "light1",
      new BABYLON.Vector3(0, 10, 0),
      this.scene
    );
  };

  /**
   * Add Camera
   */
  addCamera = () => {
    // ---------------ArcRotateCamera or Orbit Control----------
    var camera = new BABYLON.ArcRotateCamera(
      "Camera",
      Math.PI / 2,
      Math.PI / 4,
      4,
      BABYLON.Vector3.Zero(),
      this.scene
    );
    camera.inertia = 0;
    camera.angularSensibilityX = 250;
    camera.angularSensibilityY = 250;

    // This attaches the camera to the canvas
    camera.attachControl(this.canvas, true);
    camera.setPosition(new BABYLON.Vector3(5, 5, 5));
  };

  /**
   * Create Stage and Skybox
   */
  addGround = () => {
    // Create a built-in "ground" shape.
    var ground = BABYLON.MeshBuilder.CreateGround(
      "ground1",
      { height: 6, width: 6, subdivisions: 2 },
      this.scene
    );
    var groundMaterial = new BABYLON.StandardMaterial("grass0", this.scene);
    ground.material = groundMaterial;

    //Add SkyBox
    var photoSphere = BABYLON.Mesh.CreateSphere("skyBox", 16.0, 50.0, this.scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("smat", this.scene);
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.backFaceCulling = false;
    photoSphere.material = skyboxMaterial;
  };

  /**
   * Add Models
   */
  addModels = () => {
    // Add BOX
    this.boxMesh = BABYLON.MeshBuilder.CreateBox(
      "box",
      { height: 1, width: 1, depth: 1 },
      this.scene
    );
    this.boxMesh.position.y = 1;
  };

  render() {
    return (
      <canvas
        style={{ width: window.innerWidth, height: window.innerHeight }}
        ref={canvas => {
          this.canvas = canvas;
        }}
      />
    );
  }
}
export default SceneComponent;

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <SceneComponent width={window.innerWidth}
          height={window.innerHeight}/>
    );
  }
}

Above code displays scene as follows. Animation updates, but Camera view cannot be changed from the mouse.

image
image831×555 7.98 KB

why doesn’t Camera move or update in the above React Component?

Thank you.

2

Try this:

 constructor(props) {
    super(props);
    this.myRef = React.createRef()  }
  render() {
    return <canvas ref={this.myRef} /> }

And access the canvas via this.myRef.current

3

@samevision, Thank you for input. I’ve tried accessing canvas thru ref as follows:

class SceneComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { useWireFrame: false, shouldAnimate: false };
    this.sceneCanvasRef = React.createRef();
  }

  componentDidMount = () => {
    // start ENGINE
    this.engine = new BABYLON.Engine(this.sceneCanvasRef.current, true);

    //Create Scene
    this.scene = new BABYLON.Scene(this.engine);

    //--Light---
    this.addLight();

    //--Camera---
    this.addCamera();

    //--Meshes---
    this.addModels();

    //--Ground---
    this.addGround();

    // Add Events
    window.addEventListener("resize", this.onWindowResize, false);

    // Render Loop
    this.engine.runRenderLoop(() => {
      this.scene.render();
    });

    //Animation
    this.scene.registerBeforeRender(() => {
      this.boxMesh.rotation.y += 0.01;
      this.boxMesh.rotation.x += 0.01;
    });
  };

  componentWillUnmount() {
    window.removeEventListener("resize", this.onWindowResize, false);
  }

  onWindowResize = event => {
    this.engine.resize();
  };

  /**
   * Add Lights
   */
  addLight = () => {
    //---------- LIGHT---------------------
    // Create a basic light, aiming 0,1,0 - meaning, to the sky.
    var light = new BABYLON.HemisphericLight(
      "light1",
      new BABYLON.Vector3(0, 10, 0),
      this.scene
    );
  };

  /**
   * Add Camera
   */
  addCamera = () => {
    // ---------------ArcRotateCamera or Orbit Control----------
    var camera = new BABYLON.ArcRotateCamera(
      "Camera",
      Math.PI / 2,
      Math.PI / 4,
      4,
      BABYLON.Vector3.Zero(),
      this.scene
    );
    camera.inertia = 0;
    camera.angularSensibilityX = 250;
    camera.angularSensibilityY = 250;

    // This attaches the camera to the canvas
    camera.attachControl(this.sceneCanvasRef.current, true);
    camera.setPosition(new BABYLON.Vector3(5, 5, 5));
  };

  /**
   * Create Stage and Skybox
   */
  addGround = () => {
    // Create a built-in "ground" shape.
    var ground = BABYLON.MeshBuilder.CreateGround(
      "ground1",
      { height: 6, width: 6, subdivisions: 2 },
      this.scene
    );
    var groundMaterial = new BABYLON.StandardMaterial("grass0", this.scene);
    ground.material = groundMaterial;

    //Add SkyBox
    var photoSphere = BABYLON.Mesh.CreateSphere("skyBox", 16.0, 50.0, this.scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("smat", this.scene);
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.backFaceCulling = false;
    photoSphere.material = skyboxMaterial;
  };

  /**
   * Add Models
   */
  addModels = () => {
    // Add BOX
    this.boxMesh = BABYLON.MeshBuilder.CreateBox(
      "box",
      { height: 1, width: 1, depth: 1 },
      this.scene
    );
    this.boxMesh.position.y = 1;

    //var woodMaterial = new BABYLON.StandardMaterial("wood", this.scene);
    //woodMaterial.diffuseTexture = new BABYLON.Texture(
    //  "./assets/portal_cube.png",
    //  this.scene
    //);
    //this.boxMesh.material = woodMaterial;
  };

  render() {
    return (
      <canvas
        style={{ width: window.innerWidth, height: window.innerHeight }}
        ref={this.sceneCanvasRef}
      />
    );
  }
}
export default SceneComponent;

Scene component displays Scene (as shown in above picture) but, Camera still doesn’t move in Scene using Mouse.

Am I missing anything about ref?