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 ?
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.
@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 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.
@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.
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:
You can just copy and paste that into your project. Then to use it, go like this:
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.
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.