# Place div element in specific point within PerspectiveCamera scene

**URL:** <https://discourse.threejs.org/t/place-div-element-in-specific-point-within-perspectivecamera-scene/23929>\
**Category:** Questions\
**Tags:** html-overlay, css-renderer\
**Created:** [February 28, 2021, 3:19pm UTC](https://discourse.threejs.org/t/place-div-element-in-specific-point-within-perspectivecamera-scene/23929 "2021-02-28T15:19:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chris\_de\_Jong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chris_de_jong/32/16664_2.png) [@Chris\_de\_Jong](https://discourse.threejs.org/u/Chris_de_Jong)\
**Post date:** [February 28, 2021, 3:19pm UTC](https://discourse.threejs.org/t/place-div-element-in-specific-point-within-perspectivecamera-scene/23929/1 "2021-02-28T15:19:56Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 28, 2021, 4:01pm UTC](https://discourse.threejs.org/t/place-div-element-in-specific-point-within-perspectivecamera-scene/23929/2 "2021-02-28T16:01:49Z")

</div>

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](https://threejs.org/docs/index.html#examples/en/renderers/CSS2DRenderer) or [CSS3DRenderer](https://threejs.org/docs/index.html#examples/en/renderers/CSS3DRenderer).

---

<div class="post-metadata">

**Author:** ![Chris\_de\_Jong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chris_de_jong/32/16664_2.png) [@Chris\_de\_Jong](https://discourse.threejs.org/u/Chris_de_Jong)\
**Post date:** [March 1, 2021, 8:51am UTC](https://discourse.threejs.org/t/place-div-element-in-specific-point-within-perspectivecamera-scene/23929/3 "2021-03-01T08:51:40Z")

</div>

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??

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 1, 2021, 9:21am UTC](https://discourse.threejs.org/t/place-div-element-in-specific-point-within-perspectivecamera-scene/23929/4 "2021-03-01T09:21:33Z")

</div>

Seems to work as expected: [https://jsfiddle.net/mx486wk7/](https://jsfiddle.net/mx486wk7/)

---

<div class="post-metadata">

**Author:** ![Chris\_de\_Jong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chris_de_jong/32/16664_2.png) [@Chris\_de\_Jong](https://discourse.threejs.org/u/Chris_de_Jong)\
**Post date:** [March 1, 2021, 9:36am UTC](https://discourse.threejs.org/t/place-div-element-in-specific-point-within-perspectivecamera-scene/23929/5 "2021-03-01T09:36:20Z")

</div>

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…??

---

<div class="post-metadata">

**Author:** ![Chris\_de\_Jong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chris_de_jong/32/16664_2.png) [@Chris\_de\_Jong](https://discourse.threejs.org/u/Chris_de_Jong)\
**Post date:** [March 1, 2021, 10:34am UTC](https://discourse.threejs.org/t/place-div-element-in-specific-point-within-perspectivecamera-scene/23929/6 "2021-03-01T10:34:48Z")

</div>

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](https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/renderers/CSS3DRenderer.js). Lastone contains the exports…