# \#html-overlay

**URL:** https://discourse.threejs.org/tag/html-overlay/54.md

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

---

## [Mesh from HTML with transforms and types](https://discourse.threejs.org/t/mesh-from-html-with-transforms-and-types/55038)

<div class="topic-metadata">

**Author:** [@kpachinger](https://discourse.threejs.org/u/kpachinger)\
**Replies:** 6\
**Last updated:** [September 5, 2025, 2:11pm UTC](https://discourse.threejs.org/t/mesh-from-html-with-transforms-and-types/55038 "2025-09-05T14:11:32Z")

</div>

Ampersand! I am sharing a working POC for mesh-from-html. It demonstrates a boilerplate of concepts. Features are inspired by: React state, WordPress theme hooks, and XR screen casts. instanced, shader atlas hierarch…

---

## [Three CSS Layout](https://discourse.threejs.org/t/three-css-layout/62565)

<div class="topic-metadata">

**Author:** [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Replies:** 6\
**Last updated:** [December 11, 2024, 9:52am UTC](https://discourse.threejs.org/t/three-css-layout/62565 "2024-12-11T09:52:19Z")

</div>

Hi everyone, Through multiple posts on this forum, I’ve noticed a recurring need for a straightforward solution to overlay Three.js objects onto an HTML layout. In response, I’ve created a pair of utility classes – CSSL…

---

## [Aligning DOM annotations with 3D objects in immersive-ar](https://discourse.threejs.org/t/aligning-dom-annotations-with-3d-objects-in-immersive-ar/32422)

<div class="topic-metadata">

**Author:** [@LucaJunge](https://discourse.threejs.org/u/LucaJunge)\
**Replies:** 1\
**Last updated:** [February 27, 2024, 7:23pm UTC](https://discourse.threejs.org/t/aligning-dom-annotations-with-3d-objects-in-immersive-ar/32422 "2024-02-27T19:23:58Z")

</div>

Hello everybody, I’m trying to place clickable annotations made with DOM elements on objects in the 3d scene. It works for the normal “non-ar” view, but as soon as I start the AR mode (by clicking on one of the circles…

---

## [Is there a way to apply HTML on top of a geometry/mesh](https://discourse.threejs.org/t/is-there-a-way-to-apply-html-on-top-of-a-geometry-mesh/39200)

<div class="topic-metadata">

**Author:** [@Saltuk\_Kezer](https://discourse.threejs.org/u/Saltuk_Kezer)\
**Replies:** 5\
**Last updated:** [June 13, 2022, 2:49pm UTC](https://discourse.threejs.org/t/is-there-a-way-to-apply-html-on-top-of-a-geometry-mesh/39200 "2022-06-13T14:49:37Z")

</div>

Hi, I’m pretty new to ThreeJS so sorry for maybe formulating something wrong. I’m currently working on my own website and wanted to have a menu on the main page where all my sub pages are rendered as curved plane geomet…

---

## [How to prevent raycast from firing when I touch an html element?](https://discourse.threejs.org/t/how-to-prevent-raycast-from-firing-when-i-touch-an-html-element/30262)

<div class="topic-metadata">

**Author:** [@MixTeR](https://discourse.threejs.org/u/MixTeR)\
**Replies:** 7\
**Last updated:** [October 12, 2021, 7:34am UTC](https://discourse.threejs.org/t/how-to-prevent-raycast-from-firing-when-i-touch-an-html-element/30262 "2021-10-12T07:34:00Z")

</div>

Hello. The problem is I have some overlapping htmls elements and behind is the scene with some “touchable” elements and when I touch for example a html button and behind is a “touchable” element the raycast is activated.…

---

## [Worldspace DOM object in WebAR not aligning to Mesh](https://discourse.threejs.org/t/worldspace-dom-object-in-webar-not-aligning-to-mesh/30214)

<div class="topic-metadata">

**Author:** [@Suraj\_VIBROMECH](https://discourse.threejs.org/u/Suraj_VIBROMECH)\
**Replies:** 0\
**Last updated:** [September 24, 2021, 5:09am UTC](https://discourse.threejs.org/t/worldspace-dom-object-in-webar-not-aligning-to-mesh/30214 "2021-09-24T05:09:32Z")

</div>

I am working on a implemementation for positioning a DOM element on a 3D mesh. I am using the following code in the Render loop. It is working perfectly in 3D mode (non-AR mode). But in AR mode, The DOM is not getting po…

---

## [Drag HTML element to three.js world](https://discourse.threejs.org/t/drag-html-element-to-three-js-world/29665)

<div class="topic-metadata">

**Author:** [@Enzo](https://discourse.threejs.org/u/Enzo)\
**Replies:** 0\
**Last updated:** [September 7, 2021, 9:30am UTC](https://discourse.threejs.org/t/drag-html-element-to-three-js-world/29665 "2021-09-07T09:30:08Z")

</div>

Hi there. I’m working in a game where ideally you can drag the soldier to the board. The UX is overlapped with HTML+CSS. The problem is that I can’t combine the events of the HTML elements with the events of the canv…

---

## [How to attach html interactive divs to panorama](https://discourse.threejs.org/t/how-to-attach-html-interactive-divs-to-panorama/28662)

<div class="topic-metadata">

**Author:** [@Kubis10](https://discourse.threejs.org/u/Kubis10)\
**Replies:** 1\
**Last updated:** [August 5, 2021, 10:25am UTC](https://discourse.threejs.org/t/how-to-attach-html-interactive-divs-to-panorama/28662 "2021-08-05T10:25:03Z")

</div>

Hello. I am working on 360 deg portfolio and I want to attach html divs that would be interactive(clickable) on equirectangular image. I tried to make it but I have no idea how to achive that any idea how I can do it?

---

## [Place div element in specific point within PerspectiveCamera scene](https://discourse.threejs.org/t/place-div-element-in-specific-point-within-perspectivecamera-scene/23929)

<div class="topic-metadata">

**Author:** [@Chris\_de\_Jong](https://discourse.threejs.org/u/Chris_de_Jong)\
**Replies:** 5\
**Last updated:** [March 1, 2021, 10:34am UTC](https://discourse.threejs.org/t/place-div-element-in-specific-point-within-perspectivecamera-scene/23929 "2021-03-01T10:34:48Z")

</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 appr…

---

## [Resing ThreeJS canvas changes devicePixelRatio distorts overlayed html content](https://discourse.threejs.org/t/resing-threejs-canvas-changes-devicepixelratio-distorts-overlayed-html-content/23725)

<div class="topic-metadata">

**Author:** [@yedduzzo](https://discourse.threejs.org/u/yedduzzo)\
**Replies:** 2\
**Last updated:** [February 22, 2021, 10:48pm UTC](https://discourse.threejs.org/t/resing-threejs-canvas-changes-devicepixelratio-distorts-overlayed-html-content/23725 "2021-02-22T22:48:00Z")

</div>

Hi everyone, I’ve followed this tutorial for configuring a responsive ThreeJS canvas but now that I’ve added an html menu in front of it the resizing of the display for mobile purposes is actually disturbing the visuali…

---

## [Editable notes in threejs](https://discourse.threejs.org/t/editable-notes-in-threejs/10704)

<div class="topic-metadata">

**Author:** [@jaya\_kannan](https://discourse.threejs.org/u/jaya_kannan)\
**Replies:** 2\
**Last updated:** [November 11, 2019, 10:38am UTC](https://discourse.threejs.org/t/editable-notes-in-threejs/10704 "2019-11-11T10:38:48Z")

</div>

Hi. I have create a editable div element like a box in normal html body. But I need to create the same in this three js canvas also. is it possible? I have attached the example I did in normal html. Is it possible in thr…

---

## [Making a video player in three.js](https://discourse.threejs.org/t/making-a-video-player-in-three-js/468)

<div class="topic-metadata">

**Author:** [@Kumaresh](https://discourse.threejs.org/u/Kumaresh)\
**Replies:** 9\
**Last updated:** [September 13, 2019, 8:28am UTC](https://discourse.threejs.org/t/making-a-video-player-in-three-js/468 "2019-09-13T08:28:38Z")

</div>

Hello I want to make a video player in three.js only playing the 360 degree videos with controls like 1.play/pause button 2.volume 3.vr button -switch to VR mode 4.Full screen button any one here to help Thanks

---

## [How to display html content when clicking on object in three.js](https://discourse.threejs.org/t/how-to-display-html-content-when-clicking-on-object-in-three-js/7461)

<div class="topic-metadata">

**Author:** [@Deevannagari\_Ajith](https://discourse.threejs.org/u/Deevannagari_Ajith)\
**Replies:** 4\
**Last updated:** [June 17, 2019, 6:58pm UTC](https://discourse.threejs.org/t/how-to-display-html-content-when-clicking-on-object-in-three-js/7461 "2019-06-17T18:58:21Z")

</div>

I want Onclick event of threejs on 3d object to display html content(2d annotations) on screen… Please me out !!! 1.It is to display 2d annotations of 3d object after onclick… Check this link for example: https://deea…

---

## [How to combine a HTML form with a skybox?](https://discourse.threejs.org/t/how-to-combine-a-html-form-with-a-skybox/3799)

<div class="topic-metadata">

**Author:** [@Angie\_Angel](https://discourse.threejs.org/u/Angie_Angel)\
**Replies:** 4\
**Last updated:** [August 16, 2018, 8:22am UTC](https://discourse.threejs.org/t/how-to-combine-a-html-form-with-a-skybox/3799 "2018-08-16T08:22:18Z")

</div>

Hi guys. I´m trying to use a normal skycube as a background. Over it, i wanna put a simple form, just with a textarea, and a button. i want it to be over the skybox. So far. i have the skybox working great, but the for…

---

## [QGIS three.je divs/tables](https://discourse.threejs.org/t/qgis-three-je-divs-tables/1332)

<div class="topic-metadata">

**Author:** [@PeterS](https://discourse.threejs.org/u/PeterS)\
**Replies:** 2\
**Last updated:** [December 2, 2017, 11:36am UTC](https://discourse.threejs.org/t/qgis-three-je-divs-tables/1332 "2017-12-02T11:36:13Z")

</div>

Hi! I am using QGIS three.js to visualize mountain terrain and terrain parameters. The problem: The finished website “swallows” all divs with text. Why is that? I also want to include a table or insert to include a simp…

---

## [Trying to overlay a button and text on top of a three.js scene](https://discourse.threejs.org/t/trying-to-overlay-a-button-and-text-on-top-of-a-three-js-scene/390)

<div class="topic-metadata">

**Author:** [@stef](https://discourse.threejs.org/u/stef)\
**Replies:** 1\
**Last updated:** [May 22, 2017, 12:47pm UTC](https://discourse.threejs.org/t/trying-to-overlay-a-button-and-text-on-top-of-a-three-js-scene/390 "2017-05-22T12:47:39Z")

</div>

Hi all, I am very new to coding and three.js. I am trying to construct a simple full page layout with some text and a button with a link on top of my three.js scene. I just want to have the scene as the background fo…

---

## [Help with CSS3d implementation](https://discourse.threejs.org/t/help-with-css3d-implementation/319)

<div class="topic-metadata">

**Author:** [@GiuliaS](https://discourse.threejs.org/u/GiuliaS)\
**Replies:** 1\
**Last updated:** [May 12, 2017, 1:06pm UTC](https://discourse.threejs.org/t/help-with-css3d-implementation/319 "2017-05-12T13:06:59Z")

</div>

Hey there, I'm using three.js and css3d inside one web page, that has also a form with input and button. At the moment, the controls are blocking the form button and also the control area is all the page. How can I clip …

---

## [2D plots overlayed on 3D scene?](https://discourse.threejs.org/t/2d-plots-overlayed-on-3d-scene/172)

<div class="topic-metadata">

**Author:** [@mgstauff](https://discourse.threejs.org/u/mgstauff)\
**Replies:** 3\
**Last updated:** [April 13, 2017, 10:48pm UTC](https://discourse.threejs.org/t/2d-plots-overlayed-on-3d-scene/172 "2017-04-13T22:48:28Z")

</div>

Hi. How would I go about making 2D plots (of various runtime time-series parameters, etc) that overlay in the same screen position regardless of my 3D scene? I haven't found something in three.js itself to do this. I'm t…