promontis Posted June 24, 2018 Share Posted June 24, 2018 I'm currently building an interior design app using BabylonJS. The app is build with React and Redux and contains a BabylonJS canvas. When I add interior elements in the UI, they are also placed in the 3d scene. By adding an interior element, an action (stating what has changed) is published from React to Redux, where the redux store/state is being updated in a reducer using the action. I've tried updating the 3d scene according to the updated state in Redux, but it gets messy pretty quickly since you have to figure out what has changed. Since then I moved to updating the 3d scene in the reducer by using the action, since that describes what should change. How I update the scene using Redux: I'm using the Babylonjs React component as described here: https://doc.babylonjs.com/resources/babylonjs_and_reactjs When the component is mounted, I also set a global scene variable, so that I can access the scene in my reducer. In the reducer I map the action to BabylonJS calls for creating meshes/materials/etc. The interior elements all have ids and I set those ids to the meshes/materials, so that I can later update the meshes/materials when an interior element is updated. This seems to work great, and also be in line with what I've been reading in this forum, as people are recommending to use plain vanilla BabylonJS calls. Since then, I've got a requirement that the scene should not always be visible in the UI (it currently is); it should be in a separate tab. Now the problem is that the canvas isn't loaded until I visit that part of the UI, thus the global scene variable is never set, and the reducer can't update the scene (it is null). Now I try to actually formulate a question around this problem, but I find it hard to do so. I am unsure if my current setup on how I route Redux actions to BabylonJS is the correct one; it is plain vanilla BabylonJS, but I've seen implementations on this forum and Github where people use a more declarative/ReactJS way of constructing their scene. I've also read various posts on this forum stating that you should not use ReactJS with BabylonJS, because of performance reasons as you need to recreate the whole scene; best would be the update the already created meshes/materials like I'm doing now. Furthermore, I've also seen people recommending to implement an Entity-Component-System (ECS) around BabylonJS, but from what I understand, that recreates the whole scene as well. How would you tackle this problem? Thnx, Michel Quote Link to comment Share on other sites More sharing options...
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.