Babylon.js with ReactJS initialization problem

16ar · April 29, 2020, 2:18pm

Hi everyone,

I’ve been struggling for two days to have a page with a babylonjs scene in a react environment. I am trying to implement this how to example but I get compile error.

I set up a repo here : GitHub - elRomano/siteV2020_v2: Website 2020_v2

There are just the two files in the tutorial and I added a <PageWithScene /> component in the App.

I tried many changes but I always have compliing errors. If at least I could have a correct init of the scene that would help keep going on.

Thanks a lot.

sebavan · April 29, 2020, 2:26pm

Adding @brianzinn who has worked on that quite a lot and could share his experience.

16ar · April 29, 2020, 2:44pm

Thank you, I managed tweaking the code so I can see the canvas. It seems to works now but I had to change some of the provided code. Maybe my config (typescript ?) made the problem ? Or is there some bugs in the original code ?

I updated the repo.

brianzinn · April 29, 2020, 3:49pm

hi @16ar - glad you got it working. I will bring that ‘how to example’ into 2020. I wrote it in 2017, so before the ES6 modules. It’s kind of out of date as well for other reasons - additionally, it should probably have both javascript and typescript examples separate (looks like you got caught on the typings) and maybe even links to codepen or something… It would be good for me to revamp that. Thanks for sharing your repo.

16ar · April 30, 2020, 7:56am

Ok your answer makes feel better. I’m a beginner at everything : npm, react, TS, and babylonjs so to me any problem I stumble upon can come from anywhere !

But I’m improving so that’s ok

Thanks a lot !

3D_Wave_Design · May 5, 2020, 6:55pm

I would also benefit from this update, as I’m in the process of replacing my HTML gui with ReactJS!

brianzinn · May 5, 2020, 7:13pm

ok - thanks for reminder. i’ll get onto that today - For typical imperative coding there may not be advantages to using react-babylonjs NPM, for anything GUI or component-based I think the declarative GUI building should be investigated. Not saying you should use that NPM, but just to know it’s capabilities and decide for yourself. The updates to the article will be mostly without using that NPM and updated to ES6 and with/without typescript.

3D_Wave_Design · May 5, 2020, 7:26pm

@brianzinn I had a very brief look at that NPM link; adopting that would disrupt my workflow too much, so all I’m looking to do is build a component that renders my scene. I’ve read your 2017 post and tried mirroring it, but with no success.

I’m building our application using TypeScript, ES6 tree shaking, WebPack bundling and chunk splitting. Everything looks syntactically correct in Visual Studio Code – and builds with no errors, but I’m getting a blank page when I run my app, along with component errors in my commons.bundle.js (where my react and babylon modules reside).

Something that lists best use practices for the tsconfig.json and webpack compiler would be a godsend!

brianzinn · May 5, 2020, 7:38pm

You won’t get that out the updated article - I’m just using CRA - not ejected and not using custom webpack. You may get more mileage out of Raanan’s new es6 repo as a better starting point?

3D_Wave_Design · May 5, 2020, 7:44pm

@brianzinn Sorry if it seemed like I was asking for the stars and the moon haha. I should clarify – my app has been working for awhile now, I’m just now venturing into the react realm and that’s where I’m running into trouble. I’m probably messing up in my implementation of the react component in my .tsx file. Hopefully I’ll be able to see where I’ve went wrong in your update.

Thanks for the link!

brianzinn · May 5, 2020, 11:19pm

@3D_Wave_Design - I didn’t think you were asking for too much - I was just letting you know that the update likely wouldn’t help you much out of CRA, while the project from Raanan would maybe be more helpful. I’m just starting on a repo now… cheers.

brianzinn · May 6, 2020, 5:50am

ok @3D_Wave_Design, so I made a small component seems to basically do everything. if you are getting a blank page, make sure you have an engine run loop calling scene render and have the canvas reference (and useEffect or onComponentDidMount to get the ref).

I put the component here and may write a hook instead to attach to any canvas:

github.com

brianzinn/babylonjs-hook/blob/master/src/babylonjs-hook.tsx

import { Engine, Scene, Nullable, EngineOptions, SceneOptions } from '@babylonjs/core'
import React, { useEffect, useRef, useState } from 'react'

export type BabylonjsProps = {
    antialias?: boolean
    engineOptions?: EngineOptions
    adaptToDeviceRatio?: boolean
    sceneOptions?: SceneOptions
    onSceneReady: (scene: Scene) => void
    onRender?: (scene: Scene) => void
    id: string
};

export default (props: BabylonjsProps) => {
    const reactCanvas = useRef<Nullable<HTMLCanvasElement>>(null);
    const { antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady, ...rest } = props;

    const [loaded, setLoaded] = useState(false);
    const [scene, setScene] = useState<Nullable<Scene>>(null);

This file has been truncated. show original

You can just copy and paste that into your project. Then to use it, go like this:

github.com

brianzinn/babylonjs-cra-vanilla-ts/blob/master/src/App.tsx

import React from 'react';
import SceneComponent from 'babylonjs-hook';
import './App.css';
import { Scene, FreeCamera, Vector3, HemisphericLight, MeshBuilder, Mesh } from '@babylonjs/core';

let box: Mesh | undefined;

const onSceneReady = (scene: Scene) => {
  console.log('scene ready:', scene);

  // This creates and positions a free camera (non-mesh)
  var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

  // This targets the camera to scene origin
  camera.setTarget(Vector3.Zero());

  const canvas: HTMLCanvasElement = scene.getEngine()!.getRenderingCanvas()!;

  // This attaches the camera to the canvas
  camera.attachControl(canvas, true);

This file has been truncated. show original

I was going to initially make a project without any dependencies, so called it vanilla and then realized a simple hook is all many people will want, so to make it easy to install or copy. I had a couple of tequilas to celebate cinco de Mayo, so may be a few things off in there, but at least it is rendering a playground and was able to participate in the render loop with a rotating mesh. Should cover most use cases. I’ll try to get to the article by the weekend - wanted a working example first. Cheers.

3D_Wave_Design · May 6, 2020, 1:21pm

You’re a good man, Charlie Brown. Works as expected, and I now have a better understanding updating React elements. Have another tequila!

3D_Wave_Design · May 6, 2020, 5:30pm

Just in case you’re using the babylonjs-hook.tsx as a future boilerplate, I realized the useEffect function for handling window/engine resizing wasn’t working because it thought the scene state was still “null”, so I added [scene] as the second useEffect argument and it was updated.

brianzinn · May 6, 2020, 5:49pm

yeah, you are totally right - thanks. the [] only runs once and too early

Topic		Replies	Views
Babylonjs and React in Javascript Questions	6	2485	September 11, 2019
Get Started React Babylon + TS Questions	4	1114	July 7, 2022
Total beginner need guidance Questions react-native	3	295	October 16, 2023
Tutorial on Babylon.js + React? Questions	1	1560	December 11, 2019
Any way to learn how to integrate React with Babylon? Questions react	7	1927	January 26, 2023

Babylon.js with ReactJS initialization problem

Related topics