I got it, mostly. I know that React uses a “virtual dom”, and its all abstracted from the browser DOM. I’ll leave it at that for now and focus on what goes where.
Which actually brings me to a resizing issue. When opening the file in my browser, basically just copying all the example code but into a new gatsby project, (basic “hello world” starter), the canvas is too small, only occupying the upper left corner.
That makes sense, because there is nothing in my code to indicate the size of the canvas (or engine). Adding styles directly to the canvas element in the scene component makes it occupy the full window, but then its not resizing responsively as you’re dragging the window width to resize, the way you see in the Playground. Either way, small size or full window, its not responsively resizing.
<canvas style={{ width: window.innerWidth, height: window.innerHeight }} ref={reactCanvas} {...rest} />
If i hit refresh, it resizes to whatever size I’ve adjusted the window. The react/gatsby server I have running has hot reloading, so there’s nothing else I hit refresh for. Is it supposed to already occupy the whole window, and be resizing responsively? If not, where do I put the code to for it to do so? I’m honestly not sure if this is more of a Babylon thing or a react thing, but there is code to resize the engine in SceneComponent useEffect():
const resize = () => {
scene.getEngine().resize();
}
if (window) {
window.addEventListener('resize', resize);
}
I’m going to try it with create-react-app to see if there 's a difference. I know there is a react-babylonjs renderer but i was hoping to figure this out.