Make renderer.domElement equal to existing html

Questions
1

Hey there,

Is there a way to equate the existing HTML with the renderer.domElement? I’m doing this on Vue.js and would like to add things over the top of the renderer viewport using HTML. At the moment I’m doing:

  document.getElementById("hold").appendChild(renderer.domElement);

But this means I can’t place objects inside the renderer within the HTML. I have tried by guessing:

  renderer.domElement = document.getElementById("hold");

But that didn’t work. I’m just wondering if this is possible?

i.e:

< template >
< div id=“hold” > // I want this to be the renderer.domElement
< Something to go over the top of the renderer ><>
< div >

2

Assigning a DOM element to renderer.domElement is not supported. Consider this property as read-only. Besides, it always has to represent a canvas element.

What does “equate” mean in this context? In any event, if you want to place HTML elements on top of the renderer’s canvas, consider to use an approach like in this example:

https://threejs.org/examples/css3d_orthographic

The idea is to set the position CSS property to absolute and then positioning the respective HTML element via top, right, bottom, left.

3

Im not sure it’s what you want, but its possible to first create your own canvas element in HTML, style it however you want with CSS and then pass it to the renderer as the canvas parameter. For example:

var myCanvas = document.getElementById("threeCanvas");
var renderer = new THREE.WebGLRenderer({
   antialias: true,
   canvas: myCanvas,
});
1 Like
4

I’ve been trying to do this and cannot get it working.

5

both works, linking an existing canvas or dropping gl.domElement (which also is just a dom canvas element) anywhere you want. and of course you can project html on top of the canvas. it’s just a question of css, the html overlay has to be position:absolute;top:0;left:0.

ideally your template should bring its own canvas element:

<template>
  <canvas ref="canvas">
  <div style="position: absolute; top: 0px; left: 0px;">hello</div>

and then, like @DolphinIQ said, you link it:

new THREE.WebGLRenderer({ canvas: this.$refs.canvas })