Place div element in specific point within PerspectiveCamera scene

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.


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’; = ‘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:

I see BUT ( :blush: ) when I do:

labelRenderer = new CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight ); = ‘absolute’;
labelRenderer.domElement.textContent = ‘POEP’; = ‘0px’;
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’:wink: 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 Lastone contains the exports…