search

felixmariotto / three-mesh-ui

⏹ Make VR user interfaces for Three.js
https://felixmariotto.github.io/three-mesh-ui/#basic_setup
MIT License
1.26k stars 134 forks source link

Justification example is not showing the texts #228

Closed klamarth closed 1 year ago

klamarth commented 1 year ago

Hi, I was testing the Justification feature, and noticed that the example (https://felixmariotto.github.io/three-mesh-ui/#justification) is not showing the texts (it should show letters inside the boxes).

I tried something similar and it continues to not show the Text added to the panels.

This is happening on version: 6.x

Am I missing something?

swingingtom commented 1 year ago

Hello @klamarth, Actually, on the reference example you linked, ThreeMeshUI.Text (letters) have been commented out. see https://github.com/felixmariotto/three-mesh-ui/blob/d8e54fcbcc5a34e2b33a343e2a68dd04d5da0831/examples/justification.js#L149

As justification acts as 'flex-justification' (justify-content in css), it wasn't required to show texts inside boxes. It was only done to identify boxes (useful for 'contentDirection' reverse).

Removing those texts improved performance; on 6.x a justification change, also triggered text rendering wether or not the text content changed.

And for your own implementation, feel free to provide some codesandboxes or snippets. I would be glad to help you out.

@felixmariotto as you pointed out, these kind of developer/benchwork/tests examples may confuse users. They aren't displayed anymore for latest versions on production.

swingingtom commented 1 year ago

@klamarth here is a sandbox with uncommented letters https://codesandbox.io/s/justification-with-letters-slr9m1?file=/src/index.js

swingingtom commented 1 year ago

@klamarth a guess for your implementation; usually in 6.x ( @felixmariotto please correct me if wrong ) you should not place Blocks and Texts inside the same container. A Text should have its own Block container, which should only contains Text elements.

A block can do flex aligment for all its block children OR A block can do inline alignment for all its text children. But doing both would usually results in unexpected output.

This statement isn't true anymore on 7.x.x, as Text now inherits from Box.

klamarth commented 1 year ago

I didn't see the code commented out :) Sorry about that.

I reorganized my code to not add Blocks and Texts inside same container and now it's working correctly.

Thank you for your help

swingingtom commented 1 year ago

Glad to help. Have a nice and immersive ui!