Rendering custom UI (with Vue) to a specific area

Questions
1

Hello everyone!

I have a bit of a hypothetical question here regarding UI rendering. In short, I plan to align camera in a certain way so it looks straight into a wall mesh that has a computer screen mesh. Now, I want to draw a slick looking UI on top of the mesh, so it kind of looks like it was there all along :slight_smile: Here is the area I play to draw the UI:

image
image1797×1086 32.3 KB

For everything to look good and to kind of be ready for viewport/browser scaling, I need to know the specific points where I insert the UI with fixed positioning in CSS. So I need to convert four Vector3 points into screen pixel positions.

So far I’ve been thinking of two possibilities to solve this problem:

  1. Separate the screen from the computer screen mesh and use the bounding info somehow to convert values into screen pixel positions
  2. Add four points to the model in Blender to easily get the points that need to be converted into screen pixel positions

Do you guys have any better solutions for the problem? :sunglasses: :pray:

2

The only other alternative I can think about is Youtube videos on a mesh (port of CSS3DRenderer.js) where you basically map an element with css 3d on the canvas

1 Like
3

Yeah I’ve been checking that thread as well, but the problem with it was the need for an iFrame and also that there was a limit of one iFrame per scene. I would need the UI to not be in an iFrame :slight_smile:

1 Like