brianzinn / react-babylonjs

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

AdvancedDynamicTexture nesting? #201

Closed benallfree closed 2 years ago

benallfree commented 2 years ago

I think react-babylon-js must automatically assign the parent property when elements are nested.

But I stumbled across https://playground.babylonjs.com/#ZI9AK7#1214 and AdvancedDynamicTexture which seems to take a completely different approach to parenting.

For example:

const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane);

It seems you could do <adtForMesh mesh={plane}> if you had a reference to the plane, but doing

<plane>
   <adtForMesh>
       ...
   </adtForMesh>
</plane>

seems out of the question unless there was some special handling.

Also, child elements of ADT don't use the parent prop like the rest of Babylon:

advancedTexture.addControl(button1);

So it seems difficult to declaratively compose an ADT structure given these differences. Thoughts?

brianzinn commented 2 years ago

The CreateForMesh is a static property - you can let the renderer know you want it assigned to the parent mesh with the createForParentMesh prop - then it will take the closest declarative mesh:

<plane name="dialog" size={2} position={new Vector3(0, 1.5, 0)}>
    <advancedDynamicTexture name="myTexture" height={1024} width={1024} createForParentMesh>
      <rectangle ...>
      </rectangle>
    </advancedDynamicTexture>
</plane>

The addControls are all called automatically and props are pushed also directly. Have a look at this demo: https://brianzinn.github.io/react-babylonjs/?path=/story/gui--with-2-dui

The source code is here: https://github.com/brianzinn/react-babylonjs/blob/master/packages/storybook/stories/babylonjs/GUI/with2DGUI.stories.js#L214

If you want to create a button and click on it - I haven't added support for the Static Factory methods like CreateSimpleButton, but you can see here how to make clickable buttons: https://github.com/brianzinn/create-react-app-typescript-babylonjs/blob/master/src/App.tsx

Maybe I misunderstood your question, so if that doesn't answer your question just let me know and I can always see about adding anything missing. Cheers.

brianzinn commented 2 years ago

closing for housekeeping. if your questions wasn't answered or you have more questions just re-open and ask away. cheers.