# \#css2dobject

**URL:** https://discourse.threejs.org/tag/css2dobject/812.md

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

---

## [Reusing image in CSS2DObjects](https://discourse.threejs.org/t/reusing-image-in-css2dobjects/87157)

<div class="topic-metadata">

**Author:** [@Lucas\_Lamonier](https://discourse.threejs.org/u/Lucas_Lamonier)\
**Replies:** 0\
**Last updated:** [September 24, 2025, 12:37am UTC](https://discourse.threejs.org/t/reusing-image-in-css2dobjects/87157 "2025-09-24T00:37:27Z")

</div>

I am working on an animation that will spawn an image, move it, then make it go away. CSS2DObject is perfect and showing an actual image, not a texture, creates exactly the visual I need. Using GSAP, the image fades in …

---

## [Collision detect between CSS2DObject-s](https://discourse.threejs.org/t/collision-detect-between-css2dobject-s/71185)

<div class="topic-metadata">

**Author:** [@emlem](https://discourse.threejs.org/u/emlem)\
**Replies:** 2\
**Last updated:** [July 7, 2025, 11:50pm UTC](https://discourse.threejs.org/t/collision-detect-between-css2dobject-s/71185 "2025-07-07T23:50:27Z")

</div>

Hello everyone! I need help with how to detect if one CSS2DObject overlaps with another CSS2DObject. The essence of the problem is that imagine a sphere, on the surface of which the camera is placed, and around the came…

---

## [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 …

---

## [Alignment of Pointer(Sprite) and their labels in ThreeJS in a 3D Map](https://discourse.threejs.org/t/alignment-of-pointer-sprite-and-their-labels-in-threejs-in-a-3d-map/70842)

<div class="topic-metadata">

**Author:** [@MuhammadAusafJamal](https://discourse.threejs.org/u/MuhammadAusafJamal)\
**Replies:** 1\
**Last updated:** [October 14, 2024, 12:21pm UTC](https://discourse.threejs.org/t/alignment-of-pointer-sprite-and-their-labels-in-threejs-in-a-3d-map/70842 "2024-10-14T12:21:28Z")

</div>

I am working on a 3D Map with 3JS where i am using a THREE.Sprite as a pointer and CSS2D Object as a label. When hovered on the sprite the label appears above the sprite and also a side pane opens displaying the informat…

---

## [Does CSS2DRenderer ignore autoMatrixUpdate = false?](https://discourse.threejs.org/t/does-css2drenderer-ignore-automatrixupdate-false/67064)

<div class="topic-metadata">

**Author:** [@Vardan\_Betikyan](https://discourse.threejs.org/u/Vardan_Betikyan)\
**Replies:** 2\
**Last updated:** [June 23, 2024, 8:41am UTC](https://discourse.threejs.org/t/does-css2drenderer-ignore-automatrixupdate-false/67064 "2024-06-23T08:41:42Z")

</div>

I made a bunch of text labels via new CSS2DObject( ), and soon after apply matrixAutoUpdate = false, but performance is showing the my CSS2DRenderer is eating up over 80% of the program on idle. Turning matrixAutoUpdate …

---

## [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…

---

## [Buttons in CSS2DObject not working](https://discourse.threejs.org/t/buttons-in-css2dobject-not-working/61005)

<div class="topic-metadata">

**Author:** [@Bharath\_K](https://discourse.threejs.org/u/Bharath_K)\
**Replies:** 5\
**Last updated:** [February 2, 2024, 12:22pm UTC](https://discourse.threejs.org/t/buttons-in-css2dobject-not-working/61005 "2024-02-02T12:22:27Z")

</div>

I’m trying to create annotations like sketchfab. I’ve used orbit controller and CSS2DObject for creating annotation buttons. for CSS2DRenderer markerRender.domElement.style.pointerEvents = 'none' If I use pointer even…

---

## [The tooltip next to the cursor](https://discourse.threejs.org/t/the-tooltip-next-to-the-cursor/55782)

<div class="topic-metadata">

**Author:** [@wannnwdooo1984](https://discourse.threejs.org/u/wannnwdooo1984)\
**Replies:** 6\
**Last updated:** [September 8, 2023, 9:03am UTC](https://discourse.threejs.org/t/the-tooltip-next-to-the-cursor/55782 "2023-09-08T09:03:34Z")

</div>

Good afternoon. I am trying to attach a tooltip to the mouse when performing certain actions by the user and at this stage I want the tooltip to be correctly located next to the cursor. The problem is that the tooltip …

---

## [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…

---

## [Add CSS2DObject always above the other object](https://discourse.threejs.org/t/add-css2dobject-always-above-the-other-object/51887)

<div class="topic-metadata">

**Author:** [@Carl1](https://discourse.threejs.org/u/Carl1)\
**Replies:** 3\
**Last updated:** [May 26, 2023, 1:56pm UTC](https://discourse.threejs.org/t/add-css2dobject-always-above-the-other-object/51887 "2023-05-26T13:56:31Z")

</div>

Hello everyone, I’m trying to add a popup with some text above the graph node on node click. node variable there is basically entity with x,y,z coordinates. But these coordinates are static and do not changing dependi…

---

## [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…

---

## [Is it possible to combine Sprite and CSS2DObject features?](https://discourse.threejs.org/t/is-it-possible-to-combine-sprite-and-css2dobject-features/46897)

<div class="topic-metadata">

**Author:** [@waynewu](https://discourse.threejs.org/u/waynewu)\
**Replies:** 5\
**Last updated:** [February 6, 2023, 3:27am UTC](https://discourse.threejs.org/t/is-it-possible-to-combine-sprite-and-css2dobject-features/46897 "2023-02-06T03:27:58Z")

</div>

The feature I need Sprite CSS2DObject Always face to camera :white\_check\_mark: :white\_check\_mark: Always keep size (eg. 50px \* 50px) :negative\_squared\_cross\_mark: :white\_check\_mark: Can be obscured by other o…

---

## [Is there a way to reset CSS2D Position?](https://discourse.threejs.org/t/is-there-a-way-to-reset-css2d-position/47581)

<div class="topic-metadata">

**Author:** [@wonderpets11](https://discourse.threejs.org/u/wonderpets11)\
**Replies:** 1\
**Last updated:** [February 3, 2023, 4:31pm UTC](https://discourse.threejs.org/t/is-there-a-way-to-reset-css2d-position/47581 "2023-02-03T16:31:37Z")

</div>

Hi Just asking if it’s possible to reset the location of the css2d div element? I have a div element text that’s following a sphere object. The sphere rotates at its own but when the div element is behind the sphere, i…

---

## [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

---

## [GLTF Mesh CSS2D Annotation wrong position](https://discourse.threejs.org/t/gltf-mesh-css2d-annotation-wrong-position/42584)

<div class="topic-metadata">

**Author:** [@mortensassi](https://discourse.threejs.org/u/mortensassi)\
**Replies:** 11\
**Last updated:** [October 4, 2022, 9:30am UTC](https://discourse.threejs.org/t/gltf-mesh-css2d-annotation-wrong-position/42584 "2022-10-04T09:30:00Z")

</div>

Hi there, i have a GLTF model of a map with points of interests. My goal is to add annotations on top of the meshes so that a user can trigger an animation of that mesh on hover. This is the method for adding a label: …

---

## [Setting position doesn't seem to work with CSS2DObject inside a WebGLRender'ed world?](https://discourse.threejs.org/t/setting-position-doesnt-seem-to-work-with-css2dobject-inside-a-webglrendered-world/40665)

<div class="topic-metadata">

**Author:** [@MeJayEss](https://discourse.threejs.org/u/MeJayEss)\
**Replies:** 1\
**Last updated:** [July 24, 2022, 12:40pm UTC](https://discourse.threejs.org/t/setting-position-doesnt-seem-to-work-with-css2dobject-inside-a-webglrendered-world/40665 "2022-07-24T12:40:20Z")

</div>

I have an object that is being rendered by a CSS2DRenderer that lives inside my canvas which is rendered by a WebGLRendererer. I can see the CSS2D label object in the world but no matter what I use for my XYZ position w…

---

## [Remove CSS2DObject not working](https://discourse.threejs.org/t/remove-css2dobject-not-working/40364)

<div class="topic-metadata">

**Author:** [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Replies:** 4\
**Last updated:** [July 15, 2022, 12:05pm UTC](https://discourse.threejs.org/t/remove-css2dobject-not-working/40364 "2022-07-15T12:05:43Z")

</div>

I need to remove all the CSS2DObject from my scene with below code it removes only first object then displays an error in traverse scene.traverse(function(child){ if(child instanceof CSS2DObject){ …

---

## [How to stick label at that where user clicks?](https://discourse.threejs.org/t/how-to-stick-label-at-that-where-user-clicks/40348)

<div class="topic-metadata">

**Author:** [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Replies:** 1\
**Last updated:** [July 15, 2022, 7:51am UTC](https://discourse.threejs.org/t/how-to-stick-label-at-that-where-user-clicks/40348 "2022-07-15T07:51:15Z")

</div>

In the above video If I am rotating the GLB model the label is also changing it’s position I want if user clicks on any position it will stick there don’t change it’s position while rotating and panning… below…

---

## [CSS2DObject click event didn't work](https://discourse.threejs.org/t/css2dobject-click-event-didnt-work/40288)

<div class="topic-metadata">

**Author:** [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Replies:** 17\
**Last updated:** [July 14, 2022, 3:54am UTC](https://discourse.threejs.org/t/css2dobject-click-event-didnt-work/40288 "2022-07-14T03:54:32Z")

</div>

if (intersects.length \> 0) { let dot\_count = $(".dot").length; let text\_count = $(".textField").length; const numDiv = document.createElement('div'); numDiv.className = 'do…

---

## [Css2dobject failed to trigger the click event](https://discourse.threejs.org/t/css2dobject-failed-to-trigger-the-click-event/39829)

<div class="topic-metadata">

**Author:** [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Replies:** 1\
**Last updated:** [June 30, 2022, 9:45am UTC](https://discourse.threejs.org/t/css2dobject-failed-to-trigger-the-click-event/39829 "2022-06-30T09:45:14Z")

</div>

I added a click event and a MouseDown event to the dom. When I click css2dobejct, only the MouseDown event will be triggered. What is the reason for this? const dom = document.createElement("div"); dom.className = "…

---

## [Using the THREE.js CSS2DRenderer to position HTML elements from the top left](https://discourse.threejs.org/t/using-the-three-js-css2drenderer-to-position-html-elements-from-the-top-left/36466)

<div class="topic-metadata">

**Author:** [@theahura](https://discourse.threejs.org/u/theahura)\
**Replies:** 2\
**Last updated:** [May 20, 2022, 5:16pm UTC](https://discourse.threejs.org/t/using-the-three-js-css2drenderer-to-position-html-elements-from-the-top-left/36466 "2022-05-20T17:16:51Z")

</div>

The CSS2DRenderer allows me to place an HTML element in a scene based on a 3D position, which can in turn correspond to some object placed in the 3D scene. For example, I can do: const mesh; // \<some other mesh in the s…

---

## [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…

---

## [How to stop CSS2DObject face towards the camera](https://discourse.threejs.org/t/how-to-stop-css2dobject-face-towards-the-camera/32836)

<div class="topic-metadata">

**Author:** [@Victorfy1214](https://discourse.threejs.org/u/Victorfy1214)\
**Replies:** 2\
**Last updated:** [December 21, 2021, 1:07am UTC](https://discourse.threejs.org/t/how-to-stop-css2dobject-face-towards-the-camera/32836 "2021-12-21T01:07:06Z")

</div>

I’m trying to create panorama markers with CSS2DObject, After I add the marker object into the scene,I got the result like bellow picture but when I pan the panorama, the marker changed its direction. As you can …

---

## [How can CSS2DObject be occluded by mesh objects，like Sprite](https://discourse.threejs.org/t/how-can-css2dobject-be-occluded-by-mesh-objects-like-sprite/30025)

<div class="topic-metadata">

**Author:** [@seanin](https://discourse.threejs.org/u/seanin)\
**Replies:** 3\
**Last updated:** [November 17, 2021, 8:15am UTC](https://discourse.threejs.org/t/how-can-css2dobject-be-occluded-by-mesh-objects-like-sprite/30025 "2021-11-17T08:15:46Z")

</div>

https://jsfiddle.net/erntcob8/4/ When I want to rotate, if the red earth blocks the label label2222, then the label label2222 doesn’t show . this.rayObj = function(scene,camera, near,far) { this.near = near || 0; …

---

## [CSS2dObject pointerEvents](https://discourse.threejs.org/t/css2dobject-pointerevents/30781)

<div class="topic-metadata">

**Author:** [@PikabobAlex](https://discourse.threejs.org/u/PikabobAlex)\
**Replies:** 2\
**Last updated:** [October 13, 2021, 9:50am UTC](https://discourse.threejs.org/t/css2dobject-pointerevents/30781 "2021-10-13T09:50:49Z")

</div>

hi guys, Currently the pointerEvents is already set to none for CSS2dObject in order to allowing me interact with the 3d scene. Is there any way to fix it? Because I need the CSS2dObject as a button.

---

## [CSS2DObject is not defined](https://discourse.threejs.org/t/css2dobject-is-not-defined/23530)

<div class="topic-metadata">

**Author:** [@KPS](https://discourse.threejs.org/u/KPS)\
**Replies:** 6\
**Last updated:** [February 15, 2021, 4:42pm UTC](https://discourse.threejs.org/t/css2dobject-is-not-defined/23530 "2021-02-15T16:42:11Z")

</div>

Hello, I have searched the forums but not found an answer to this. I am getting the error Uncaught ReferenceError: CSS2DObject is not defined I have CSS2DRenderer.js in my script tags at the start. When I try to impor…

[Next page](https://discourse.threejs.org/tag/css2dobject/812.md?match_all_tags=true&page=1&tags%5B%5D=css2dobject)