Tutorial on Babylon.js + React?

Questions
1

Are there any tutorials on how to set up React with Babylon.js and create a simple scene?

I’ve seen this react-babylonjs - npm but its missing some steps.

I’m not an expert in node or React so I don’t know how to set up this environment properly.

I did these steps:

  • npx create-react-app babylonapp
  • cd babylonapp
  • npm install react-babylonjs --save
  • npm install @babylonjs/core --save
  • npm install @babylonjs/gui --save
  • npm install @babylonjs/inspector --save
  • npm install react-reconciler --save
  • npm install typescript --save

Then I create this index.js file

import React from 'react';
import { Engine, Scene } from 'react-babylonjs'
import { Vector3 } from '@babylonjs/core';
 
const DefaultPlayground = () => (
  <Engine canvasId="sample-canvas">
    <Scene>
      <freeCamera name="camera1" position={new Vector3(0, 5, -10)} target={Vector3.Zero()} />
      <hemisphericLight name="light1" intensity={0.7} direction={Vector3.Up()} />
      <sphere name="sphere1" diameter={2} segments={16} position={new Vector3(0, 1, 0)} />
      <ground name="ground1" width={6} height={6} subdivisions={2}  />
    </Scene>
  </Engine>
)
 
export default DefaultPlayground

then run: npm start

Open browser in localhost:3000

Nothing shows up on the screen.

2

All good!

I got it running. I think that tutorial needs updating.

import React from 'react';
import ReactDOM from 'react-dom';
import { FreeCamera, Engine, HemisphericLight, Sphere, Ground, Scene } from 'react-babylonjs'
import { Vector3 } from '@babylonjs/core';

ReactDOM.render(
    <div>
        <Engine canvasId="sample-canvas">
          <Scene>
            <FreeCamera name="camera1" position={new Vector3(0, 5, -10)} target={Vector3.Zero()} />
            <HemisphericLight name="light1" intensity={0.7} direction={Vector3.Up()} />
            <Sphere name="sphere1" diameter={2} segments={16} position={new Vector3(0, 1, 0)} />
            <Ground name="ground1" width={6} height={6} subdivisions={2}  />
          </Scene>
        </Engine>
    </div>, 
    document.getElementsByTagName('body')[0]
);
2 Likes