HTML on different faces of cube

Questions
,
1

Hi all!,

So basically, I have a cube with some texture on it. I want to add some text label/information on one side of the cube, most likely HTML. I want something like this

The only difference I’m trying to make is I want the sprite/label attached to one face of the cube, kindly tell me what should I use to make it attached to the face of the cube.

Any help would be useful!

Thank you.

1 Like
2
  1. I wouldn’t build upon that example - it’s a custom solution and seems bugged for higher resolutions (see screenshot, label floats outside of the screen.)

Screen Shot 2020-07-21 at 14.44.39
Screen Shot 2020-07-21 at 14.44.391547×824 90 KB

  1. You can easily add HTML in 3D space (ie. position of cube + face offset) using CSS2DRenderer.) This example may also be helpful.
3

Thank you for your example, but the problem coming is I want the HTML sticked to only side of the cube, so If I rotate the cube, the HTML disappears from camera sight. If there’s any way to do that kindly share.

4

You can try using CSS3DRenderer then, though mind it has quite severe limitations (you can have cubes and simple shapes, but won’t be able to use models etc.)

If you do need models + depth-tested HTML floating in 3D, I don’t know if there’s any way besides rendering said HTML onto a CanvasTexture, or using gimmicky tricks like in the example you linked:

  • First, add a CSS2DRenderer and render the HTML (it’s always rendered above the WebGLRenderer.)
  • In the WebGLRenderer, add a point in the 3D space at the same location as the HTML element.
  • On every frame, test whether the 3D point is occluded, if it is - hide the CSS2DObject (note it will work the same way as the example above, so mesh won’t really occlude parts of the HTML element, you’ll just be able to either hide it or unhide the HTML element entirely using opacity.)
5

Just an option. Take in count the normal of the side which the label belongs to and compute visibility, based on dot product of the normal and the ray from the camera to the position of the label.
https://jsfiddle.net/prisoner849/Lgd0sm1q/
Pretty much like there: Way to hide Points if geometry is seen from backside?, but on the side of javascript.

3 Likes
6

This example works to an extent, all I want now is the label to not face the camera, basically stick to only one side/face of the cube, as of now If I rotate it the label keeps facing the camera. Is there any way I can do that?

7

изображение

With changing the css renderer from CSS2DRenderer to CSS3DRenderer and slight modifications of creation of html-element and its css, you’ll get this result.

https://jsfiddle.net/prisoner849/qn4s7hd0/

1 Like
8

@prisoner849
I have been playing around with your CSS2Renderer fiddle, thank you so much for the example!
One thing I noticed is that the position of the number icon breaks when we include responsive window resize, how can we solve this?

I was also wondering if you would like to explain the code snippet on line 55 and 56? Am I correct to assume that you are converting from 2D to 3D coordinates given the position of the 3D box?

BR/Sofie

9

Hi!
Have a look at this fiddle: https://jsfiddle.net/prisoner849/w6sz1t2a/
The code for resize is taken from this example: https://threejs.org/examples/?q=CSS2#css2d_label

10

Well there you go! I’ve forgotten to include my CSS2 render in my Window resize function :blush:
Thanks!

1 Like
11

Hi Paul @prisoner849,

Been trying to accomplish something similar to what you’ve produced by repurposing your code. I want HTML on every face.

I can work out the rotation angles and positions etc, but can’t get the div to appear on the outside for some reason.

For example, if I change the y rotation of the label to -0.5*pi, and change the label position to (-2,0.5,0) then the label appears in the correct place (i.e. the opposite face) but is only visible from the inside of the cube. I can’t figure out why - are you able to help at all?

Thanks!!

EDIT: looking back I can see it’s because of the way the whole display is produced, i.e. normal to side of label. Any way I can achieve labels on all sides? Thanks again.

12

Could you provide an editable live code example, that demonstrates the issue? jsfiddle, codepen etc.

15

@prisoner849
This is a quick representation of my problem - https://jsfiddle.net/4mhr7Lgj/

I’m still figuring it out so this is not finished code, but the issue is visible here. Left side of cube is visible only from inside but I’m suspectful of having done something wrong somewhere.

EDIT:
Think I’ve kinda figured it out - except the back face still has an issue.

Face 6 disappears when rotating sometimes around the back but faces 1-5 seem to be fine. If I can fix that then I’m sorted.

https://jsfiddle.net/8ye2z5s0/

16

Each side has to have its own normal. In your case, you can just normalize positions of those css3d-elements: https://jsfiddle.net/prisoner849/j3t1vw4p/

1 Like