CODEWITHSUNDEEP
htmlcss
Eärendil Baggins
Eärendil Baggins

Reputation: 572

How do I draw <div> elements on top of a three.js canvas with a transparent background?

I was reading this answer but the approach proposed is purely theoretical. In my HTML5 code I've tried something like this:

<div id='gameCanvas'>
    <div id="insideText">First trial</div>
</div>

and in the CSS I've put this:

#insideText{
    background-color: transparent;
}

I'm quite a newbie when it comes to HTML/CSS, so I'm probably making some easy mistake, but this way I get a black line above my canvas, and the text appears in that black line. I want the text to appear over the canvas without this black line, and I would also like to know how to place some text on different areas of the canvas (my canvas is not fullscreen).

Edit: If I put the <div> outside the canvas element it appears with a transparent background indeed, but always as a separate element from the canvas.

Upvotes: 2

Views: 5570

Answers (1)

user128511
user128511

Reputation:

Your question isn't specific to three or canvas. It's just a basic HTML/CSS question which I'm sure is answered 1000 times on this site but since search sucks I'll answer again and leave it to someone with more patience to close as a dupe

To make 2 or more elements overlap you generally need a parent element. That element has to have css position: relative; or position:absolute;. That makes it the anchor/origin/base for its children. Note: <body> is already marked this way.

Then for all the children you can use position:absolute and set their positions with left, top, right, or bottom

Example

const ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = 'yellow';
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = 'red';
ctx.arc(150, 75, 125, 0, Math.PI * 2, true);
ctx.fill();
<h1>Some text</h1>

<div style="position: relative; display: inline-block;">
  <canvas></canvas>
  <div style="position: absolute; left: 1em; top: 1em;">foo</div>
  <div style="position: absolute; right: 1em; bottom: 1em;">bar</div>
</div>

note: the display: inline-block; is to make the outer element fit the content rather than stretch to width of its parent (the body in this case). There are 100s of other ways to set the size of elements.

note that elements are transparent by default so no need to set the background color as transparent unless you set it somewhere else as non-transparent

const renderer = new THREE.WebGLRenderer();
document.querySelector('#gameCanvas').appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.add(
 new THREE.Mesh(
   new THREE.SphereGeometry(1), 
   new THREE.MeshBasicMaterial({color:'red'})
 )
);
scene.background = new THREE.Color('yellow');
const camera = new THREE.PerspectiveCamera(45, 2, .1, 10);
camera.position.z = 2;
renderer.render(scene, camera);
#gameCanvas {
  position: relative;
}
#insideText {
  position: absolute;
  left: 20px;
  top: 20px;
}
<h1>some text</h1>
<div id='gameCanvas'>
    <div id="insideText">First trial</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>

Upvotes: 5

Related Questions