Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AdvancedDynamicTexture nesting? #201

Closed
benallfree opened this issue Jan 30, 2022 · 2 comments
Closed

AdvancedDynamicTexture nesting? #201

benallfree opened this issue Jan 30, 2022 · 2 comments

Comments

@benallfree
Copy link
Contributor

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
Copy link
Owner

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
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants