Cannot run the SpinningBox Example

[weypro]

Hi. I created a new react project

npx create-react-app spinningbox

and added babylonjs with the command:

yarn add react-babylonjs @babylonjs/core @babylonjs/gui

After initializing the project, I tried to run the SpinningBox Example and make some changes:

1. Before:export const SceneWithSpinningBoxes = ( ) => ( After:const SceneWithSpinningBoxes = () => (
2. Before (the template):

   function App() {
   return (
   <div className="App">
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
       <p>
         Edit <code>src/App.js</code> and save to reload.
       </p>
       <a
         className="App-link"
         href="https://reactjs.org"
         target="_blank"
         rel="noopener noreferrer"
       >
         Learn React
       </a>
     </header>
   </div>
   );
   }

   After:

   function App() {
   return (
   <div className="App">
     <SceneWithSpinningBoxes>
     </SceneWithSpinningBoxes>
   </div>
   );
   }

   The code was compiled successfully, but nothing displayed on the page.

[brianzinn]

hi @weypro - Have a look here. You don't need to export SceneWithSpinningBoxes unless it's in a different file. https://codesandbox.io/s/epic-darwin-tohk0?file=/src/App.tsx

[weypro]

Yes, I think exporting SceneWithSpinningBoxes doesn't affect the result. Actually, I find the truth that the canvas size must be defined like this:

#babylon-canvas {
  width: 80%;
  height: 80%;
}

Otherwise the size may be 'infinite' and make the WebGL engine crash. By the way, the canvas id is babylonJS in the JSX example in README.md while it's babylon-canvas in the TSX example. I think it's better to use the same id.

[brianzinn]

You make a good point in that by default it is not intuitive that CSS is needed to size the canvas - if you don't pass in props. I will be addressing this in the new documentation site and will keep in mind when updating the examples. Thanks for sharing. I'm going to close, but if you have a code proposal for this library then please re-open to discuss.