1

I have a problem creating a 2d gui on the renderer. The 2d gui has to be positioned dynamically according an elements width, which is drawn in threejs (element has width X using threejs units, menu has to be positioned 50px to the right most side of it etc).

Is there a way to achieve it? Drawing directly on the renderer using sprites or using DOM elements?

mjanisz1
  • 1,478
  • 3
  • 17
  • 43

2 Answers2

0

Yes using DOM elements, that is the only way (sprites use images AFAIK) unless you need to move your elements in 3D, which would need the css renderer.

  • If your object's geometry yet has a width property then use it

  • Otherwise compute the bounding box to get it ;

Then you just need to find the good multiplication factor to convert that value into pixels to fit your layout

Mouloud85
  • 3,826
  • 5
  • 22
  • 42
  • @Atranhasis the problem is with the camera distance on Z axis changing its distance to show the full element on screen (it can be quite tall), thus changing the elements "on screen" width – mjanisz1 Aug 17 '15 at 14:57
  • 1
    Sure ;) what about that link http://stackoverflow.com/questions/15331358/three-js-get-object-size-with-respect-to-camera-and-object-position-on-screen – Mouloud85 Aug 17 '15 at 15:00
0

Use the html dom elements to create your gui and set it's css position to absolute so it appears on the renderer rather than hidden below the renderer For example:

<body>
<div id="gui">Sample Gui </div> 
<!--You can add anything to this division for example I used text "sample gui"-->
<style>
#gui {
position: absolute;
top: topPosition%;
left: leftPosition%;
right: rightPosition%;
bottom: bottomPosition%;
}
</style>

after adding this part any of your gui elements will appear on the renderer also you can adjust your gui elements position using top,left,right, bottom properties of css.

It's Joker
  • 65
  • 10