Hi,
I would like to place a html element with a scene generated with PerspectiveCamera. Is there a easy way to accomplish this or do I need extra JS to accomplish this?
I’m a beginner so any suggestions are highly appreciated!
Should the HTML element have fixed position in 3D space? Or do you just need a screen-space UI element?
For the first use case, I suggest you have a look at CSS2DRenderer or CSS3DRenderer.
2 Likes
Hi Mugen87,
I’ve started with Css2Renderer but the div isn’t rendered into the scene…this is my code to add a div:
const testDiv = document.createElement( ‘div’ );
testDiv.className = ‘label’;
testDiv.textContent = ‘TESTING’;
testDiv.style.marginTop = ‘1em’;
const testLabel = new CSS2DObject( testDiv );
testLabel.position.set( 0, 1, 0 );
scene.add( testLabel );
Do you have a clue why the div isn’t added??
Seems to work as expected: https://jsfiddle.net/mx486wk7/
I see BUT ( 
) when I do:
labelRenderer = new CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = ‘absolute’;
labelRenderer.domElement.textContent = ‘POEP’;
labelRenderer.domElement.style.top = ‘0px’;
console.log(labelRenderer.domElement);
container.appendChild( labelRenderer.domElement );
the element is added as fixed position on canvas. Are the orbitcontrols necessary to make it work within the scene? I would like the element on a position within the scene, not the canvas. I’m using perspectivecamera…
BTW: when I try it with CSS3renderer (import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from ‘/three/CSS3DRenderer.js’
I’ve got a error: Uncaught SyntaxError: The requested module ‘/three/CSS3DRenderer.js’ does not provide an export named ‘CSS3DObject’…
In CSS3DRenderer.js I also can’t find a export name to include in the import…??
strange the css3renderer.js version which I downloaded (from threejs) is different from https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/renderers/CSS3DRenderer.js. Lastone contains the exports…