search

brianzinn / react-babylonjs

React for Babylon 3D engine
https://brianzinn.github.io/react-babylonjs/
818 stars 105 forks source link

Some questions #174

Closed fr-an-k closed 2 years ago

fr-an-k commented 2 years ago

How to use useCamera? Or otherwise customize the camera? Or should I stick with onCreated? How to use SolidParticleSystem? How to develop more components? Any plans for adding react to the babylonjs playground?

brianzinn commented 2 years ago

useCamera

Use camera would be something like:

import { useCamera} from 'react-babylonjs';

// in a component in a scene:
const camera = useCamera((scene) => new ArcRotateCamera(..., scene));

in TypeScript:

const camera = useCamera<ArcRotateCamera>((scene: Scene) => new ArcRotateCamera(..., scene), ...);

I would stick with <arcRotateCamera .../> because it allows you to pass in props and have them update automatically on the babylon camera - ie: if you set the radius as a prop then it would flow to the camera automatically.

SPS

This has not been implemented declaratively, but I would welcome any contributions. SPS from what I have used was more setting parameters and some callback functions. Right now it would need to be done imperatively, though.

More components

Currently the only "components" in this library are Model, Skybox and Html components. Those serve as documentation on how to develop and compose more components. I am trying to keep this library as small in size as possible and likely it would be useful to split off a library of helper utilities and useful Components.

Add react to babylonjs playground

I would need to ask in the forum if that would be an accepted addition. I know when somebody suggested TypeScript support that it was a very welcome addition (nasimi added it). I think there is just a compiler option needed for the monaco editor:

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    jsx: "react"
});

Other than that it may be that this library would need to be loaded async or otherwise this dist I think needs to live on their repo. I have made a couple of small PR changes to the playground in the past - it's easy to work with. This is a good question for the babylon forum. I have been always using CodeSandbox, but would prefer to use the playground for sure.

fr-an-k commented 2 years ago

Thanks; my impression is that this project is quite complicated for beginners, reducing community traction.

It could benefit from more documentation, such as how to start storybook, how to contribute and how the code generation works (in the code itself or not).

React snippets in the playground would be major.

brianzinn commented 2 years ago

Looks like JSX in playground PR may not be accepted... 😞

brianzinn commented 2 years ago

hi @frank-unovica - the documentation is in the works and is being redone with Gatsby. I intend to work through first how the library works and then I will add more on how to contribute. Thanks for the great ideas. The new website will be opening up all examples as code sandboxes within the documentation site (and they can be opened in new window and edited).