# \#html

**URL:** https://discourse.threejs.org/tag/html/666.md

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

---

## [Create a "floating" header like in the examples?](https://discourse.threejs.org/t/create-a-floating-header-like-in-the-examples/93936)

<div class="topic-metadata">

**Author:** [@SimRuJ](https://discourse.threejs.org/u/SimRuJ)\
**Replies:** 3\
**Last updated:** [September 1, 2026, 12:29pm UTC](https://discourse.threejs.org/t/create-a-floating-header-like-in-the-examples/93936 "2026-09-01T12:29:01Z")

</div>

Hi, a lot of examples (e.g. this one with a pot) use a transparent header that is displayed on top of the scene, so whatever object is displayed in it, still shows up behind the header. I looked at the .html file for th…

---

## [Shader-based VR UI in Three.js (XRUI tech demo)](https://discourse.threejs.org/t/shader-based-vr-ui-in-three-js-xrui-tech-demo/93713)

<div class="topic-metadata">

**Author:** [@MichaelChistyakov](https://discourse.threejs.org/u/MichaelChistyakov)\
**Replies:** 1\
**Last updated:** [August 24, 2026, 4:25pm UTC](https://discourse.threejs.org/t/shader-based-vr-ui-in-three-js-xrui-tech-demo/93713 "2026-08-24T16:25:43Z")

</div>

Demo: XRUI — Shader UI toolkit Hey folks — sharing a shader-based UI toolkit I’ve been building purely for myself. It’s a non-commercial, experimental learning project: I had an older canvas UI, rewrote it a…

---

## [HTML2Canvas with TSL + R3F](https://discourse.threejs.org/t/html2canvas-with-tsl-r3f/91604)

<div class="topic-metadata">

**Author:** [@Myth\_Xenodo](https://discourse.threejs.org/u/Myth_Xenodo)\
**Replies:** 1\
**Last updated:** [May 16, 2026, 2:53pm UTC](https://discourse.threejs.org/t/html2canvas-with-tsl-r3f/91604 "2026-05-16T14:53:00Z")

</div>

Hi, I have been seeing lately the HTML in Canvas API + TSL + Three.js… but is there any basic resources that can work with it in React-Three-Fiber or just pure vanilla script + react that would work on it?? I can’t find…

---

## [\[R3F\] @react-three/drei Html distanceFactor scaling breaks during camera transitions](https://discourse.threejs.org/t/r3f-react-three-drei-html-distancefactor-scaling-breaks-during-camera-transitions/90429)

<div class="topic-metadata">

**Author:** [@notharshprajapati](https://discourse.threejs.org/u/notharshprajapati)\
**Replies:** 1\
**Last updated:** [April 5, 2026, 6:23am UTC](https://discourse.threejs.org/t/r3f-react-three-drei-html-distancefactor-scaling-breaks-during-camera-transitions/90429 "2026-04-05T06:23:46Z")

</div>

I’m working on a React Three Fiber project where I use the Html component from @react-three/drei to label equipment on 3D vessels. To keep the UI clean, I use the distanceFactor prop to maintain a constant screen-space s…

---

## [Is it possible to refract and disperse interactive html dom element (image, button and text)](https://discourse.threejs.org/t/is-it-possible-to-refract-and-disperse-interactive-html-dom-element-image-button-and-text/88924)

<div class="topic-metadata">

**Author:** [@Roshit\_Shrestha](https://discourse.threejs.org/u/Roshit_Shrestha)\
**Replies:** 3\
**Last updated:** [January 4, 2026, 2:36am UTC](https://discourse.threejs.org/t/is-it-possible-to-refract-and-disperse-interactive-html-dom-element-image-button-and-text/88924 "2026-01-04T02:36:51Z")

</div>

i am trying to refract the html dom element using a 3d sphere with glass like material. to do this currently i have captured the dom element using html2canvas and set it as a texture on a plane. when i do this i cannot i…

---

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

---

## [Can click on mesh through Drei Html](https://discourse.threejs.org/t/can-click-on-mesh-through-drei-html/86346)

<div class="topic-metadata">

**Author:** [@siobh](https://discourse.threejs.org/u/siobh)\
**Replies:** 0\
**Last updated:** [August 18, 2025, 9:56pm UTC](https://discourse.threejs.org/t/can-click-on-mesh-through-drei-html/86346 "2025-08-18T21:56:35Z")

</div>

Hi! I am having a bug with drei Html that I haven’t been able to figure out. I have a mesh that you can click on and then in a completely separate component some html. You seem to be able to “click” on the mesh from insi…

---

## [Gltf three.js model jumping and resizing problem in mobile browser](https://discourse.threejs.org/t/gltf-three-js-model-jumping-and-resizing-problem-in-mobile-browser/71023)

<div class="topic-metadata">

**Author:** [@Karl\_Essential](https://discourse.threejs.org/u/Karl_Essential)\
**Replies:** 1\
**Last updated:** [July 27, 2025, 3:18pm UTC](https://discourse.threejs.org/t/gltf-three-js-model-jumping-and-resizing-problem-in-mobile-browser/71023 "2025-07-27T15:18:58Z")

</div>

Hi, I have a gltf 3D model on my html website and the model is rotating and fading out on scroll as it meant to be. The problem is in the mobile browsers where the model is jumping and resizing a little bit in the same m…

---

## [Parent container for multiple CSS3D objects](https://discourse.threejs.org/t/parent-container-for-multiple-css3d-objects/84208)

<div class="topic-metadata">

**Author:** [@ser1ze](https://discourse.threejs.org/u/ser1ze)\
**Replies:** 0\
**Last updated:** [June 19, 2025, 10:27am UTC](https://discourse.threejs.org/t/parent-container-for-multiple-css3d-objects/84208 "2025-06-19T10:27:49Z")

</div>

I’m working on a Three.js project (not using R3F) where I have a 3D drum-like object consisting of 8 slides. Each slide has a SLIDE\_FRONT part where I place HTML content using CSS3DRenderer. Currently, my implementation…

---

## [Error: Uncaught TypeError: Failed to resolve mpdule specifier "three". Relative references must stastart with either "",""", or ".."](https://discourse.threejs.org/t/error-uncaught-typeerror-failed-to-resolve-mpdule-specifier-three-relative-references-must-stastart-with-either-or/82732)

<div class="topic-metadata">

**Author:** [@Gon](https://discourse.threejs.org/u/Gon)\
**Replies:** 4\
**Last updated:** [May 17, 2025, 11:53pm UTC](https://discourse.threejs.org/t/error-uncaught-typeerror-failed-to-resolve-mpdule-specifier-three-relative-references-must-stastart-with-either-or/82732 "2025-05-17T23:53:51Z")

</div>

Hello Guys, I know I probably shouldn’t be here bothering professionals with my problem, but I’ve been working on a project. I decided to make a 3D like game, and am only using html, javascript css and for the 3D part tr…

---

## [My Mesh visualiser code takes so long to load the mesh files to the browser , is SSR a solution?](https://discourse.threejs.org/t/my-mesh-visualiser-code-takes-so-long-to-load-the-mesh-files-to-the-browser-is-ssr-a-solution/81779)

<div class="topic-metadata">

**Author:** [@raouf\_khabat](https://discourse.threejs.org/u/raouf_khabat)\
**Replies:** 8\
**Last updated:** [May 6, 2025, 5:05pm UTC](https://discourse.threejs.org/t/my-mesh-visualiser-code-takes-so-long-to-load-the-mesh-files-to-the-browser-is-ssr-a-solution/81779 "2025-05-06T17:05:50Z")

</div>

I’m working on a 3D mesh viewer using .obj and .mtl files, but I’m running into performance issues — the browser takes a long time to load and render the mesh files, and it’s using a lot of my local PC’s resources which …

---

## [Unexpected Shadows from HTML (Drei) Component in Cached Scene](https://discourse.threejs.org/t/unexpected-shadows-from-html-drei-component-in-cached-scene/79797)

<div class="topic-metadata">

**Author:** [@gianoseduto](https://discourse.threejs.org/u/gianoseduto)\
**Replies:** 0\
**Last updated:** [March 19, 2025, 8:38am UTC](https://discourse.threejs.org/t/unexpected-shadows-from-html-drei-component-in-cached-scene/79797 "2025-03-19T08:38:37Z")

</div>

Hi everyone! I’m currently trying to fix the bug shown in the picture. It seems to be caused by the HTML (Drei) component, but it only manifests itself if the scene I’m loading has already been loaded in the same sessio…

---

## [HTML Content Positioned Wrong in iOS](https://discourse.threejs.org/t/html-content-positioned-wrong-in-ios/77066)

<div class="topic-metadata">

**Author:** [@tnjsrf](https://discourse.threejs.org/u/tnjsrf)\
**Replies:** 3\
**Last updated:** [March 17, 2025, 2:33pm UTC](https://discourse.threejs.org/t/html-content-positioned-wrong-in-ios/77066 "2025-03-17T14:33:39Z")

</div>

iOS Rendering Issue with \<Html\> from @react-three/drei Hi everyone, I’m a beginner with Three.js, so I apologize in advance if I’m missing something obvious! I’m working on a React + Three.js project using @react-three/…

---

## [React DREI \<HTML\>](https://discourse.threejs.org/t/react-drei-html/78525)

<div class="topic-metadata">

**Author:** [@Abhirup\_Das](https://discourse.threejs.org/u/Abhirup_Das)\
**Replies:** 5\
**Last updated:** [February 23, 2025, 10:15pm UTC](https://discourse.threejs.org/t/react-drei-html/78525 "2025-02-23T22:15:41Z")

</div>

\<Canvas\> \<axesHelper /\> \<CameraRig position={cameraPos} /\> \<Floor props={floorProps} /\> \<WallContainer props={wallData} isSelectionDisabled={true} /\> \<ambientLight intensity={5} /\> \<pointLight p…

---

## [ThreeD Object and I frame positioning](https://discourse.threejs.org/t/threed-object-and-i-frame-positioning/75451)

<div class="topic-metadata">

**Author:** [@sourav-thind](https://discourse.threejs.org/u/sourav-thind)\
**Replies:** 3\
**Last updated:** [December 24, 2024, 9:23am UTC](https://discourse.threejs.org/t/threed-object-and-i-frame-positioning/75451 "2024-12-24T09:23:34Z")

</div>

Hello there, I am making a portfolio, where there is a laptop which is animated with scroll, and there is an i frame with my original website , i want that website to be in screen of laptop, i could set the i frame in t…

---

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

---

## [Make the background of HTML Element from R3 Drei Transparent](https://discourse.threejs.org/t/make-the-background-of-html-element-from-r3-drei-transparent/74041)

<div class="topic-metadata">

**Author:** [@Cory\_Grossman](https://discourse.threejs.org/u/Cory_Grossman)\
**Replies:** 0\
**Last updated:** [November 14, 2024, 10:05pm UTC](https://discourse.threejs.org/t/make-the-background-of-html-element-from-r3-drei-transparent/74041 "2024-11-14T22:05:41Z")

</div>

Hey all! I am using React Three Drei to render HTML text within a scene of planes with differing z positions. The issue I am having is that even tho my HTML has a background set to “none”, the objects “behind” the HTML…

---

## [Positioning of the tracking label](https://discourse.threejs.org/t/positioning-of-the-tracking-label/71303)

<div class="topic-metadata">

**Author:** [@megacool23](https://discourse.threejs.org/u/megacool23)\
**Replies:** 7\
**Last updated:** [September 27, 2024, 11:56am UTC](https://discourse.threejs.org/t/positioning-of-the-tracking-label/71303 "2024-09-27T11:56:24Z")

</div>

Good afternoon. I am making a label for shooting an object in 3D space and I am faced with the problem that when the camera is looking in the opposite direction relative to the object, the projection vector does not give…

---

## [HTML 5 Canvas Animation messed up while changing resolution and not working on mobile](https://discourse.threejs.org/t/html-5-canvas-animation-messed-up-while-changing-resolution-and-not-working-on-mobile/65137)

<div class="topic-metadata">

**Author:** [@Hamza\_Ashraf](https://discourse.threejs.org/u/Hamza_Ashraf)\
**Replies:** 0\
**Last updated:** [May 6, 2024, 4:45pm UTC](https://discourse.threejs.org/t/html-5-canvas-animation-messed-up-while-changing-resolution-and-not-working-on-mobile/65137 "2024-05-06T16:45:14Z")

</div>

solved : this code is removed for security reasons.

---

## [Export to PDF the three.js canvas PLUS an html container. How?](https://discourse.threejs.org/t/export-to-pdf-the-three-js-canvas-plus-an-html-container-how/68054)

<div class="topic-metadata">

**Author:** [@Natalia\_Medrano](https://discourse.threejs.org/u/Natalia_Medrano)\
**Replies:** 11\
**Last updated:** [July 12, 2024, 2:03pm UTC](https://discourse.threejs.org/t/export-to-pdf-the-three-js-canvas-plus-an-html-container-how/68054 "2024-07-12T14:03:17Z")

</div>

Hello guys, I am struggling to export one page of my web app into PDF. I currently have an html container which contains the three.js canvas and some div with panels and so on. The three.js canvas has four viewports at …

---

## [Html in a 3d environment](https://discourse.threejs.org/t/html-in-a-3d-environment/67036)

<div class="topic-metadata">

**Author:** [@Jason\_Maximilian](https://discourse.threejs.org/u/Jason_Maximilian)\
**Replies:** 2\
**Last updated:** [June 21, 2024, 7:50am UTC](https://discourse.threejs.org/t/html-in-a-3d-environment/67036 "2024-06-21T07:50:24Z")

</div>

hello, how to add a text or image or a button in which it will be part of 3d environment, so for example, if i placed that html element at 0,0,5 and the camera was at 0.0,4 then it should not be displayed, i mean i want…

---

## [How change threejs Editor ui (For Example add one Table)](https://discourse.threejs.org/t/how-change-threejs-editor-ui-for-example-add-one-table/29708)

<div class="topic-metadata">

**Author:** [@parisa-hr](https://discourse.threejs.org/u/parisa-hr)\
**Replies:** 1\
**Last updated:** [April 16, 2024, 1:42am UTC](https://discourse.threejs.org/t/how-change-threejs-editor-ui-for-example-add-one-table/29708 "2024-04-16T01:42:28Z")

</div>

I clone threejs from Github In Editor project I want to add a table from Grid.js This Editor creates UI Elements from the ui.js file and I don’t know how should I add one custom Item there. I createElement div and imp…

---

## [Drei's HTML elements flicker](https://discourse.threejs.org/t/dreis-html-elements-flicker/63215)

<div class="topic-metadata">

**Author:** [@dangbungbu](https://discourse.threejs.org/u/dangbungbu)\
**Replies:** 4\
**Last updated:** [March 25, 2024, 3:24pm UTC](https://discourse.threejs.org/t/dreis-html-elements-flicker/63215 "2024-03-25T15:24:14Z")

</div>

In my project (\[https://codesandbox.io/p/sandbox/fbxloader-forked-srz7rj?file=%2Fpublic%2Findex.html%3A15%2C56\]), labels are put on a 3D model for annotation purpose. The problem is that the labels are flickering in my …

---

## [Html mirror react elemets in r3f](https://discourse.threejs.org/t/html-mirror-react-elemets-in-r3f/62871)

<div class="topic-metadata">

**Author:** [@Tyubit](https://discourse.threejs.org/u/Tyubit)\
**Replies:** 3\
**Last updated:** [March 18, 2024, 9:40pm UTC](https://discourse.threejs.org/t/html-mirror-react-elemets-in-r3f/62871 "2024-03-18T21:40:25Z")

</div>

I placed div with react element in Html from drei and the element doesn’t respond on scroll and flipped. In documentation no parameters flipX or Y. I know people use iframe for to show website and be able to scroll, but…

---

## [How do you make html position follow a mesh in react three fiber/drei?](https://discourse.threejs.org/t/how-do-you-make-html-position-follow-a-mesh-in-react-three-fiber-drei/62167)

<div class="topic-metadata">

**Author:** [@Cube\_3js](https://discourse.threejs.org/u/Cube_3js)\
**Replies:** 1\
**Last updated:** [March 1, 2024, 10:41pm UTC](https://discourse.threejs.org/t/how-do-you-make-html-position-follow-a-mesh-in-react-three-fiber-drei/62167 "2024-03-01T22:41:33Z")

</div>

I would like for a button, when it moves down, the html element acting as a label for each button to follow it. So far the buttons are moving without the labels. Here is my code so far: export function CalculatorButto…

---

## [Log HtmlCanvasElement on mobile devices](https://discourse.threejs.org/t/log-htmlcanvaselement-on-mobile-devices/60561)

<div class="topic-metadata">

**Author:** [@howlhaku](https://discourse.threejs.org/u/howlhaku)\
**Replies:** 2\
**Last updated:** [January 22, 2024, 12:35am UTC](https://discourse.threejs.org/t/log-htmlcanvaselement-on-mobile-devices/60561 "2024-01-22T00:35:44Z")

</div>

Hello guys, i currently having this problem. I published my threejs website to server, on desktop everything work fine, even with devices mode on chrome. But on my mobile devices threejs module not working although html …

---

## [Uncaught ReferenceError: npm run build error](https://discourse.threejs.org/t/uncaught-referenceerror-npm-run-build-error/58804)

<div class="topic-metadata">

**Author:** [@m3riadoc](https://discourse.threejs.org/u/m3riadoc)\
**Replies:** 3\
**Last updated:** [December 1, 2023, 10:31pm UTC](https://discourse.threejs.org/t/uncaught-referenceerror-npm-run-build-error/58804 "2023-12-01T22:31:03Z")

</div>

Recently I have finished course project. I ve been working with others and now I decided to upload repository to my github. While opening site with npm run dev everything runs great, but while going with npm run build an…

---

## [React-three-drei Overlap \<Line\> component vertice point with Html without affecting the prespective of the scene](https://discourse.threejs.org/t/react-three-drei-overlap-line-component-vertice-point-with-html-without-affecting-the-prespective-of-the-scene/55733)

<div class="topic-metadata">

**Author:** [@SrMarcius](https://discourse.threejs.org/u/SrMarcius)\
**Replies:** 3\
**Last updated:** [September 7, 2023, 9:46am UTC](https://discourse.threejs.org/t/react-three-drei-overlap-line-component-vertice-point-with-html-without-affecting-the-prespective-of-the-scene/55733 "2023-09-07T09:46:31Z")

</div>

Hi, im fairly new to threejs and react-three and im working on a project that consists of various points in a scene conected by a line, these points have the Html react three drei component. My objective is to prevent t…

---

## [Html iframes not working properly](https://discourse.threejs.org/t/html-iframes-not-working-properly/54388)

<div class="topic-metadata">

**Author:** [@akh22697](https://discourse.threejs.org/u/akh22697)\
**Replies:** 0\
**Last updated:** [July 28, 2023, 9:33pm UTC](https://discourse.threejs.org/t/html-iframes-not-working-properly/54388 "2023-07-28T21:33:13Z")

</div>

So I am having this issue where when I add Html to my gltf through mesh and add transform and the position for example, when I reload my scene that Html component moves away form the provided position and then moves back…

---

## [Seeking Front-End Engineer / Cofounder | Web3 Startup](https://discourse.threejs.org/t/seeking-front-end-engineer-cofounder-web3-startup/53957)

<div class="topic-metadata">

**Author:** [@Joseph](https://discourse.threejs.org/u/Joseph)\
**Replies:** 3\
**Last updated:** [July 28, 2023, 8:47am UTC](https://discourse.threejs.org/t/seeking-front-end-engineer-cofounder-web3-startup/53957 "2023-07-28T08:47:46Z")

</div>

We are looking for a front end engineer to join our bootstrapped startup (ID8R) as cofounder. We have a technical lead, but looking for someone to accelerate our progress and own the front end of our app and websites. W…

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