How can I use babylon HTMLMesh

[nut_ali]

Hi:
developers, I want to set htmlMesh such as location image and text and panel in my bbl project, and I use this demo code(https://playground.babylonjs.com/#Y2LIXI#44). but I can not see html in my viewer. my project coordinate system is CGCS2000 , the coordinate is very big .
the center is
{centerx: 37445566, ceneterY: 1096.6300048828125, centerZ: 4347817.765474789}
the boundingbox is this
[ 37442838.99999999, 37448293, 4345327.425749578, 4350308.1052, 945, 1248.260009765625 ]
how can I set the htmlMesh position , and I can see it in the view

[RaananW]

The HtmlMesh has moved to the addons package and is available in the ADDONS namespace in the playground, so no need to use the external npm package.

I’ll CC @Deltakosh to answer the direct question

[Deltakosh]

We will need a proper repro of the issue in the PG to help

[nut_ali]

I have install babylon-htmlmesh as the Document said and it the htmlmesh worked without error, but can not see the html; you mean I should install another external npm package??

[nut_ali]

I have give up the htmlmesh , I use GUI.textBlock and GUI.Rectangle instead of html to create Label and panel , but GUI is not very convenient to set style and word wrap like html. and the text word wrap is not useful

[mawa]

@nut_ali

GUI is not very convenient to set style and word wrap like html. and the text word wrap is not useful

There is (at least) word wrap in GUI. Could you share a PG? A number of us are still unhappy with the textBlock and its absence of styling. We are working towards improving this aspect Meanwhile, I’m pretty sure we can find some sort of work-around for your use case. Would just need the PG and the desired result (that of course if you cannot figure it yourself… I’m not sayin’, it might require some sort of ‘compromise’

[nut_ali]

thanks for reply.
In my opinion HtmlMesh is the future trend。because with React or Vue component ,it is easy to mount the component to htmlMesh, and debug exactly css and js for FE is very convenient . but the coordinate of htmlMesh I do not know how to set . so I use GUI to Implement first .
I will try to make PG.
and another question for GUI.Rectangle is that does not have inner Shadow style. it only have outer Shadow

[HiGreg]

@nut_ali

GUI.Rectangle is that does not have inner Shadow style. it only have outer Shadow

I just dug unto this and it appears that the primary limitation is that GUI.Rectangle is drawn using HTML Canvas context. The canvas context does not inherently implement CSS properties on the elements drawn on the canvas, so properties such as “inset” on box-shadow are not automatically available.

That said, the opportunity here is to expand the Rectange control to additional object types that do implement desired style properties. I know this is beyond the normal user, but I’ll note the following stackoverflow comments that point toward such implementations, in case I or someone else begins to tackle expanding the Rectangle control:

Is there something of CANVAS shadow properties like the "spread" property of CSS box-shadow?

How to style canvas elements with CSS

Inset-shadow on HTML5 canvas image

The Rectangle control does implement rounded corners, so additional special handling such as outlined in the above stackoverflow links is not totally out of the question.

[mawa]

@HiGreg

The canvas context does not inherently implement CSS properties on the elements drawn on the canvas, so properties such as “inset” on box-shadow are not automatically available.

Looks like we are collecting some useful input for ‘design-thinking’ on this project of yours of revamping the BJS GUI

@HiGreg

in case I or someone else begins to tackle expanding the Rectangle control

Well. In essence, rectangle is a container. My two-cents is that we would somehow need to ‘normalize’ the properties/styling of containers and controls. Which I believe is part of what you are currently working on, isn’t it?

@nut_ali

In my opinion HtmlMesh is the future trend。because with React or Vue component ,it is easy to mount the component to htmlMesh, and debug exactly css and j

In my opinion, HTML mesh is a ‘compromise’ side project that will never fullfil all the needs for a proper GUI. I believe we have a much stronger and relevant base with the BJS GUI. Although, it would need a complete overhaul. I think we all agree on that (including @PatrickRyan). Obviously, there’s a lack of resources to undergo everything that’s needed for such a large project. Also considering all that has been built on top of it, incl. the GUI Editor and side- Community extensions. But as an optimistic person, I believe we can still make progress extending the current (and ‘extrapolating’, building a ‘base’ for a future). A future where, ideally, the connection to css/dom UI would be a lot closer and allow for minimal ‘effort’/‘inconvenience’ to switch or extend from… (react, vue, vite…). I humbly suppose that this would be the ultimate goal, is it?

[nut_ali]

I make a PG like this, and I don`t know how to set the position , the HTMLMesh seems very small. it is not as the pixel as I set.

Babylon.js Playground

[Deltakosh]

The main problem is that CSS (that we are using to align the mesh with the content) is simply not capable of such a precision level. You have to rework your scene to NOT use big numbers (If anything become bigger than 100 you will have precision issues)

This is a current limitation of CSS matrices

[nut_ali]

But we are using a projection coordinate system，this coordinate system apply big coordinate. If we have to change the coordinate system just because of such a small feature, it would be too big a change and not worth the cost

[Deltakosh]

I do agree with you but there is not a lot I can do. This is a CSS constraint