How to get Scene reference on React? Should I program on React being total new using BabylonJS?

Questions
1

Hi.

I have an Engine, Scene and Mesh on App.tsx.
I can gget the reference of Engine and Mesh, but I can’t get the reference of the Scene.

How could I get the reference of the scene to control it?
Should I add the Engine Component to the React renderer and then create the scene manually to get control of it?

I’m also seeing that 95% of examples are Typescript code without any React framework.
I’m thinking seriously to get rid from React and program my site using just Typescript.
I’m total new with BabylonJS… should I get rid from React?
My knowledge of React is also limited, I just wanted to learn React and Babylon JS at the same time…

Screenshot_1
Screenshot_11356×1316 64.2 KB

Thanks in advance.

1 Like
3

Hi Khanon!

First of all - WELCOME! - it’s great to have you! You chose 2 incredibly amazing technologies for your journey :slight_smile: With that said, I would (personally) suggest to take it one step at a time - learn 1 then 2.

If you want to learn React I would start with that, but you can obviously use BabylonJS without React, or use React just as the UI / Rendering layer.

Regarding your question - looking at the scene component here: react-babylonjs/Scene.tsx at master · brianzinn/react-babylonjs · GitHub we can see that it’s just a Context provider that does not render anything except children, and it does not utilise ref forwarding, so the ref you pass it, is not passed down on it’s children.

You can see in your code that the ref on has red underline, which I bet says that ref is not a supported prop on .

To get the Scene, you can just replace the ref property with onSceneMount like this.

<SceneComponent onSceneMount={({ scene, canvas } => /* do whatever you need to with scene and canvas */)} ..... />

You can see the code that drives this below, it’s on line 136 in the file I have mentioned.

if (typeof props.onSceneMount === 'function') {
      props.onSceneMount({
        scene: scene,
        canvas: scene.getEngine().getRenderingCanvas()!
      });
}

Hope this helps, please let me know if you have any more questions.

2 Likes
4

Thanks for the reply.

As I’m seeing most of tutorials and code examples are without React framework I agree and I will get rid from it.

Thanks for the explanation about how to get the scene tho :slight_smile:

Best regards.

5

Welcome to the start of an incredible journey!!

React just comprises the application hosting the Babylon.js framework and WebGXX renderer - @Foxhoundn is wise to suggest taking on one at a time.
Unless you’re building a web application which involves 3D rendering (like a product catalog) that involves heavy HTML-to-canvas integration, you’ll spend most of your time looking at stuff in only one of these different “worlds”.

There is a TypeScript starter repository that the BJS team informally maintains - see this thread for more BabylonJS boilerplate for start project with TypeScrpit

1 Like
6

Thanks @jelster for the advice.
Definitely I will remove React yeah :slight_smile: Then I can focus on BabylonJS.
I don’t plan being a pro of BabylonJS, but creating a cool personal website to show my projects etc :slight_smile:

1 Like
7

@Khanon for my first project I used BJS with javascript but for my second project i used React+BJS (still using javascript). I have found React adds so much more ability but it does have its own learning curve. I use hooks exclusively and no components. Both my projects are still under dev. I would agree with learning one at a time but keep in mind the option to use both together.

1 Like