a lot of examples (e.g. this one with a pot) use a transparent header that is displayed on top of the scene, so whatever object is displayed in it, still shows up behind the header. I looked at the .html file for that example (F12 in my browser) and it uses this inside the <body>:
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - the Utah Teapot<br /> from <a href="url here" target="_blank" rel="noopener">Udacity Interactive 3D Graphics</a>
</div>
Other examples look very similar.
I copied this code into the body of my .html file but it created a full, fixed header with a certain height and a white background and the actual scene is pushed down. I can only guess that this is done with css (the <head>of the example mentions a “main.css” but I can’t see it in the F12 menu) or is this specific to three.js?
How do I create a “floating” header like in the examples? I’m just looking for a way to display some static text (no need to ever change it) at the top left or top center that doesn’t require an extra orthographic camera to display it as some kind of HUD. If it matters, I keep my regular three.js code in a separate .js file (not inside the .html file).
I still don’t know where to find the .css file but I managed to do it with regular javascript inside my “init” function (in the file that contains all the other Three.js code):
let header = document.createElement('div');
header.style.position = "fixed"; //Also works with "absolute" but not without
header.style.top = "10px"; //10px from the top
header.style.width = "200px"; //Width of the div, without it the div hugs the text
header.style.height = "50px";
header.style.textAlign = "center"; //Center text horizontally in div
header.style.backgroundColor = "yellow";
header.style.color = "blue"; //Text color
header.style.left = "50%";
header.style.transform = "translate(-50%,0)";
header.innerHTML = "<b>This is bold text!</b>";
document.body.appendChild(header);
left = "50%" makes the div start at 50% width (left to right), which means that the left half of the page is completely empty. I want to position the text in the top center of the page (center of div=center of page), so I have to move the div to the left by 50% of its width (=x, y=0), which is exactly what translate does.
It is possible to use something like <p style="color:red"> in the inner HTML too (which is going to override the color set earlier), even though <center> did not work in my tests (maybe I was missing some other setting).
If I resize the window, then the text stays in the middle but it does get covered by lil-gui if the window is very small (possibly because I add the menu further down in my code).
Oh, it’s a general file? That explains why I wasn’t able to find it, thanks!
This version is (don’t want to add a .css just for that):
header.style.position = "absolute";
header.style.top = "0px";
header.style.width = "100%";
header.style.padding = "10px";
//header.style.boxSizing = "border-box"; //it doesn't look like this is required
header.style.textAlign = "center";
header.style.backgroundColor = "yellow";
header.style.color = "blue";
header.innerHTML = "<b>This is bold text!</b>";
The div covers the whole width and even when the background isn’t transparent, the main scene still isn’t pushed downwards, like with my first try.
I think I prefer the version with the smaller div, even though it’s a little bit more code.
