Babylonjs react typescript

Questions
1

Hi,
I am trying to get babylon js working with react – typescript CRA and I am not getting the following error. Could any please advise what I might be doing wrong.

TypeScript error in /Users/dhiru/Source/Repos/Try1/client-app/src/App.tsx(10,41):
Argument of type ‘typeof Engine’ is not assignable to parameter of type ‘ComponentClass<{ babylonJSContext: WithBabylonJSContext; }, any> | FunctionComponent<{ babylonJSContext: WithBabylonJSContext; }>’.
Type ‘typeof Engine’ is not assignable to type ‘ComponentClass<{ babylonJSContext: WithBabylonJSContext; }, any>’.
Construct signature return types ‘Engine’ and ‘Component<{ babylonJSContext: WithBabylonJSContext; }, any, any>’ are incompatible.
The types of ‘props’ are incompatible between these types.
Type ‘Readonly & Readonly<{ children?: ReactNode; }>’ is not assignable to type ‘Readonly<{ babylonJSContext: WithBabylonJSContext; }> & Readonly<{ children?: ReactNode; }>’.
Type ‘Readonly & Readonly<{ children?: ReactNode; }>’ is not assignable to type ‘Readonly<{ babylonJSContext: WithBabylonJSContext; }>’.
Types of property ‘babylonJSContext’ are incompatible.
Type ‘WithBabylonJSContext | undefined’ is not assignable to type ‘WithBabylonJSContext’.
Type ‘undefined’ is not assignable to type ‘WithBabylonJSContext’. TS2345

 8 | window.CANNON = CANNON;
 9 |

10 | const EngineWithContext = withBabylonJS(Engine);
| ^
11 | const gravityVector = new Vector3(0, -9.81, 0);
12 | let sphere: Nullable = null;
13 |

2

With the information you provided all I can conclude is that you need to pass a engine instance to the method withBabylonJS… You are currently passing the type.

it’s like using the Vector3 to get the gravityVector. The first is the type, the second a instance of the type.

Anyway, here is some code to help you.

        const canvas = document.getElementById('renderCanvas');
        (canvas! as HTMLCanvasElement).width = document.body.clientWidth; //document.width is obsolete
        (canvas! as HTMLCanvasElement).height = document.body.clientHeight;

        var engine = new BABYLON.Engine(canvas as HTMLCanvasElement, true, { preserveDrawingBuffer: true, stencil: true });

        var scene = new BABYLON.Scene(engine);
	    BABYLON.SceneLoader.Append("model/modelito/", "niceModel.gltf", scene, function (scene) {
             scene.createDefaultCameraOrLight(true, true, true);
		});       
        // run the render loop
        engine.runRenderLoop(function () {
            scene.render();
        });

        // the canvas/window resize event handler
        window.addEventListener('resize', function () {
            engine.resize();
        });
1 Like