2D gui on threejs renderer
Question
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?
2 answers
solution1
0 2015-08-17 14:53:10
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
widthproperty then use itOtherwise 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
solution2
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.