How to prevent text from overlapping in CSS3D

Questions
1

As shown in the figure, adjust the perspective in CSS3D, and the text overlaps. How to make the text overlay

image
image745×841 52.7 KB

2

Hi,
I’m not a specialist of this, but it looks like your method ‘getMeshSize’ returns 1 to which you add ‘px’
So, in the end your div is 1px :wink: I’m not sure if it returns the mesh size in bjs value or if it returns one because it doesn’t handle it this way. You would need to check on that.

3 Likes
3

You’re right! It was my negligence that caused such a problem. Thank you for your answer!

4

Also, I have a small question. I want the size of the div to be the same as the generated plane. How can I obtain the width and height of the pix units of the plane

5

I checked on it later just to realize that the size was actually of 0 when you create the plane (options).
So, I don’t even know how it returned the value of 1.
To be honest, I don’t know how to retrieve the size in pixels of the plane. I suppose the size in pixels relates to the canvas size/resolution? I’m sorry, I never had to do that before. May be through the texture resolution? I have no faen clue…Better ask an expert cc @Evgeni_Popov

6

I also have the same question, maybe I don’t know much about the method of CSS3D

7

To obtain the size of the plane in pixels, you need to project the vertices into screen space, to obtain their 2D coordinates. From these coordinates, you can calculate the 2D bounding box, or any other thing you may need in screen space.

Here’s an example of how to proceed:

8

I just knew you would be the one hero :man_superhero: to ask for this :smile:
Bookmarked this as, you never know, might become handy to have sometime.
Thx a lot for looking into this and have a great day :sunglasses:

9

Thank you very much for your reply. I have learned a lot

10

I am just a beginner in Babylonjs, and there are still many questions that need to be consulted :wink:haha

11

I don’t see this as a beginner’s topic. I’m not sure how many people in this forum would have known how to solve this. And combining BJS and CSS3D is also not the most common approach. And then, we all are learning. :student: Every single day. :sweat_smile:
Thankfully, as you can see, we are the lucky people. :four_leaf_clover: We can benefit from nearly instant and extensive support from The Team an soak-up everything from their expert advise. :stuck_out_tongue_winking_eye: