# \#css2drenderer

**URL:** https://discourse.threejs.org/tag/css2drenderer/949.md

[Latest](https://discourse.threejs.org/latest.md) · [Categories](https://discourse.threejs.org/categories.md) · [Tags](https://discourse.threejs.org/tags.md)

---

## [Accessible app with CSS2DRenderer](https://discourse.threejs.org/t/accessible-app-with-css2drenderer/84921)

<div class="topic-metadata">

**Author:** [@pb5000](https://discourse.threejs.org/u/pb5000)\
**Replies:** 2\
**Last updated:** [July 8, 2025, 2:28am UTC](https://discourse.threejs.org/t/accessible-app-with-css2drenderer/84921 "2025-07-08T02:28:08Z")

</div>

Hi, is it possible to nest labels, e.g. like create a “main” element, and then add discrete labels inside it via CSS2DObject? Or, add a “nav” element and have a few labels inside that one, but positioned separately? It …

---

## [Multiple CSS2DRenderers doesn't work on scissored views of a single scene](https://discourse.threejs.org/t/multiple-css2drenderers-doesnt-work-on-scissored-views-of-a-single-scene/78645)

<div class="topic-metadata">

**Author:** [@waveflip](https://discourse.threejs.org/u/waveflip)\
**Replies:** 3\
**Last updated:** [March 4, 2025, 10:39am UTC](https://discourse.threejs.org/t/multiple-css2drenderers-doesnt-work-on-scissored-views-of-a-single-scene/78645 "2025-03-04T10:39:06Z")

</div>

I want to display two camera views of a single scene, with text label overlays shown in both views. I use renderer.setScissor to render 2 separate views on the page, using html elements to define viewport bounds, i.e. \<…

---

## [Draggable, resizable, html frame on the science](https://discourse.threejs.org/t/draggable-resizable-html-frame-on-the-science/64894)

<div class="topic-metadata">

**Author:** [@gigstar](https://discourse.threejs.org/u/gigstar)\
**Replies:** 0\
**Last updated:** [May 1, 2024, 7:28am UTC](https://discourse.threejs.org/t/draggable-resizable-html-frame-on-the-science/64894 "2024-05-01T07:28:19Z")

</div>

Hello With CSS2DRenderer or CSS3DRenderer, is there any way to make a simple code that can have a 2D HTML box on the scene and adding to zoom function, that box is draggable and resizable. in some examples like this exa…

---

## [CSS2DRenderer Stopping the Raycaster Rays](https://discourse.threejs.org/t/css2drenderer-stopping-the-raycaster-rays/63492)

<div class="topic-metadata">

**Author:** [@Deepak\_Saini](https://discourse.threejs.org/u/Deepak_Saini)\
**Replies:** 1\
**Last updated:** [April 1, 2024, 10:44am UTC](https://discourse.threejs.org/t/css2drenderer-stopping-the-raycaster-rays/63492 "2024-04-01T10:44:19Z")

</div>

I had sprites in my 2d Scene, and normally it was working fine with raycaster working properly. But when i add CSS2DRenderer in the scene. I was not able to interact with the objects, I have changed its zIndex of the d…

---

## [How to click html element inside mesh](https://discourse.threejs.org/t/how-to-click-html-element-inside-mesh/52236)

<div class="topic-metadata">

**Author:** [@rocky\_scube](https://discourse.threejs.org/u/rocky_scube)\
**Replies:** 2\
**Last updated:** [June 6, 2023, 1:25pm UTC](https://discourse.threejs.org/t/how-to-click-html-element-inside-mesh/52236 "2023-06-06T13:25:27Z")

</div>

Hi folks, I’ve a 360 image which I’m plotting inside sphere and in that mesh I’m rendering css2DObject using css2DRenderer and I’m using Raycaster to get the array of objects, but Raycaster is not detecting my css2DObje…

---

## [CSS2DObject Click/PointerUp events not working with OrbitControls](https://discourse.threejs.org/t/css2dobject-click-pointerup-events-not-working-with-orbitcontrols/49862)

<div class="topic-metadata">

**Author:** [@abgrac](https://discourse.threejs.org/u/abgrac)\
**Replies:** 1\
**Last updated:** [March 31, 2023, 10:00pm UTC](https://discourse.threejs.org/t/css2dobject-click-pointerup-events-not-working-with-orbitcontrols/49862 "2023-03-31T22:00:38Z")

</div>

Hello all, I know there are workarounds for this issue mentioned multiple times in other questions (see list). But replacing click for pointerdown is not always a good solution, as some interfaces need pointerup events …

---

## [How to remove div element from css2d object](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111)

<div class="topic-metadata">

**Author:** [@Hi\_Lamb](https://discourse.threejs.org/u/Hi_Lamb)\
**Replies:** 13\
**Last updated:** [March 2, 2023, 2:21am UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111 "2023-03-02T02:21:01Z")

</div>

Hi I actually add the div element in css2d object in runtime and i also add the button and add listener with it. once I click that button then my remove functionality call and that div remove but once I do then it didn’t…

---

## [Aniamte css2dobject with gsap](https://discourse.threejs.org/t/aniamte-css2dobject-with-gsap/44935)

<div class="topic-metadata">

**Author:** [@mahmud\_hussin\_Mohamed](https://discourse.threejs.org/u/mahmud_hussin_Mohamed)\
**Replies:** 0\
**Last updated:** [November 20, 2022, 8:30am UTC](https://discourse.threejs.org/t/aniamte-css2dobject-with-gsap/44935 "2022-11-20T08:30:26Z")

</div>

i need to animate my css2dobjet element in a way to go from postions to my cube mesh how ever i made it and succeed but the thing is its going to the Reverse way postion !! here is my code : css2dobjext exapmle

---

## [Orbit controller not working](https://discourse.threejs.org/t/orbit-controller-not-working/43583)

<div class="topic-metadata">

**Author:** [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Replies:** 2\
**Last updated:** [October 13, 2022, 9:26am UTC](https://discourse.threejs.org/t/orbit-controller-not-working/43583 "2022-10-13T09:26:52Z")

</div>

in my scene, orbit controller is not working and this is my code: import \* as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import { MTLLoader } from 'three/examples/jsm/lo…

---

## [CSS2DObject How to override the transform attribute](https://discourse.threejs.org/t/css2dobject-how-to-override-the-transform-attribute/40693)

<div class="topic-metadata">

**Author:** [@MARIOMARUI](https://discourse.threejs.org/u/MARIOMARUI)\
**Replies:** 2\
**Last updated:** [August 1, 2022, 9:31am UTC](https://discourse.threejs.org/t/css2dobject-how-to-override-the-transform-attribute/40693 "2022-08-01T09:31:23Z")

</div>

let labelObject = new CSS2DObject(labelDiv); labelObject.name = label; labelObject.position.set(point.x, point.y, point.z); I want to set the rotate of the transform attribute of css2dobjec…

---

## [Use CSS2DRenderer within main WebGLRenderer scene?](https://discourse.threejs.org/t/use-css2drenderer-within-main-webglrenderer-scene/40663)

<div class="topic-metadata">

**Author:** [@MeJayEss](https://discourse.threejs.org/u/MeJayEss)\
**Replies:** 2\
**Last updated:** [July 23, 2022, 10:23pm UTC](https://discourse.threejs.org/t/use-css2drenderer-within-main-webglrenderer-scene/40663 "2022-07-23T22:23:32Z")

</div>

I have a scene that is built around the WebGLRenderer. I’d like to mix in a particular element that is rendered by a CSS2DRenderer. Is this possible? For example, suppose I wanted to add the moon/earth example code fo…

---

## [ThreeJS unable to get the click event from CSS2DObject](https://discourse.threejs.org/t/threejs-unable-to-get-the-click-event-from-css2dobject/31121)

<div class="topic-metadata">

**Author:** [@Matteo\_Boscolo](https://discourse.threejs.org/u/Matteo_Boscolo)\
**Replies:** 3\
**Last updated:** [July 18, 2022, 10:20am UTC](https://discourse.threejs.org/t/threejs-unable-to-get-the-click-event-from-css2dobject/31121 "2022-07-18T10:20:48Z")

</div>

I’m working with ThreeJs in order to provide a ruler for the 3d model. I have created a div in this way and than I have put it inside CSS2DObject as in the below code const measurementDiv = document.createEleme…

---

## [I am applying annotation, but stuck on X and Y coordinates](https://discourse.threejs.org/t/i-am-applying-annotation-but-stuck-on-x-and-y-coordinates/40248)

<div class="topic-metadata">

**Author:** [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Replies:** 2\
**Last updated:** [July 13, 2022, 8:55am UTC](https://discourse.threejs.org/t/i-am-applying-annotation-but-stuck-on-x-and-y-coordinates/40248 "2022-07-13T08:55:33Z")

</div>

Hello guys, I am working on adding hotspots while user click on GLB model, my code works well on pixel value if I gave of top and left attribute of Div element and Textarea element, but it creates one problem when I am r…

---

## [Remove child element is exist in HTML](https://discourse.threejs.org/t/remove-child-element-is-exist-in-html/37220)

<div class="topic-metadata">

**Author:** [@Hi\_Lamb](https://discourse.threejs.org/u/Hi_Lamb)\
**Replies:** 0\
**Last updated:** [April 19, 2022, 5:50pm UTC](https://discourse.threejs.org/t/remove-child-element-is-exist-in-html/37220 "2022-04-19T17:50:44Z")

</div>

removeConnection(event) { let parentElement = document.getElementById('RemoveElement'); let childElement = document.getElementById(event.target.id); parentElement.removeChild(childElement); } i want to…

---

## [CSS2d not showing and I am not sure what am I missing?](https://discourse.threejs.org/t/css2d-not-showing-and-i-am-not-sure-what-am-i-missing/34752)

<div class="topic-metadata">

**Author:** [@SeeOn](https://discourse.threejs.org/u/SeeOn)\
**Replies:** 2\
**Last updated:** [February 11, 2022, 7:38am UTC](https://discourse.threejs.org/t/css2d-not-showing-and-i-am-not-sure-what-am-i-missing/34752 "2022-02-11T07:38:42Z")

</div>

I am trying to use css2d as show below and using v0.135.0 and in Renderer it is surely adding on DOM and updating translate value when I move and Yes I did add in CSS for .label But no result in canvas. Here …

---

## [Hide labels that go behind a gltf?](https://discourse.threejs.org/t/hide-labels-that-go-behind-a-gltf/34365)

<div class="topic-metadata">

**Author:** [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Replies:** 9\
**Last updated:** [February 2, 2022, 9:06am UTC](https://discourse.threejs.org/t/hide-labels-that-go-behind-a-gltf/34365 "2022-02-02T09:06:19Z")

</div>

I’ve created labels and i am planning to hide them whenever they “go behind” or when the view is blocked by the gltf model what would be the easiest solution to achieve this? My gltf: loaderGB.load('./resources/map/lan…

---

## [CSS2DObject label divs appear once in console but appear each appear twice within the scene?](https://discourse.threejs.org/t/css2dobject-label-divs-appear-once-in-console-but-appear-each-appear-twice-within-the-scene/33339)

<div class="topic-metadata">

**Author:** [@Ian\_Shaw](https://discourse.threejs.org/u/Ian_Shaw)\
**Replies:** 1\
**Last updated:** [January 18, 2022, 2:40pm UTC](https://discourse.threejs.org/t/css2dobject-label-divs-appear-once-in-console-but-appear-each-appear-twice-within-the-scene/33339 "2022-01-18T14:40:27Z")

</div>

Hi all I am having an issue in my 3D scene where the css2drenderer labels are being shown in the correct position in front of the camera (next to appropriate 3d spheres see left of screenshot); but the labels are rendere…

---

## [Is it possible to combine CSS2DRenderer and DAT.GUI together when the gui overlays the scene?](https://discourse.threejs.org/t/is-it-possible-to-combine-css2drenderer-and-dat-gui-together-when-the-gui-overlays-the-scene/27725)

<div class="topic-metadata">

**Author:** [@kasra0](https://discourse.threejs.org/u/kasra0)\
**Replies:** 2\
**Last updated:** [July 2, 2021, 4:57pm UTC](https://discourse.threejs.org/t/is-it-possible-to-combine-css2drenderer-and-dat-gui-together-when-the-gui-overlays-the-scene/27725 "2021-07-02T16:57:33Z")

</div>

Hi, I have a scene with some GUI (dat.gui) that are superimposed on the scene I am able to add labels on 3D objects with CSS2DObject and CSS2DRenderer but then the controls are not responding anymore. If I reduce th…

---

## [CSS2DRenderer occlusing my other tags](https://discourse.threejs.org/t/css2drenderer-occlusing-my-other-tags/22991)

<div class="topic-metadata">

**Author:** [@tizkon](https://discourse.threejs.org/u/tizkon)\
**Replies:** 1\
**Last updated:** [January 31, 2021, 1:36pm UTC](https://discourse.threejs.org/t/css2drenderer-occlusing-my-other-tags/22991 "2021-01-31T13:36:54Z")

</div>

Hello I hope you all are fine. I am trying to access to my index.html tags but CSS2DRenderer is occlusing all my index.html tags On my scene I have a GLTF render on a canvas and a CSS2DRenderer appended to the body and…