# \#css

**URL:** https://discourse.threejs.org/tag/css/95.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 Text + Shader Editor](https://discourse.threejs.org/t/shader-text-shader-editor/83643)

<div class="topic-metadata">

**Author:** [@didi\_softwares](https://discourse.threejs.org/u/didi_softwares)\
**Replies:** 0\
**Last updated:** [June 5, 2025, 9:39pm UTC](https://discourse.threejs.org/t/shader-text-shader-editor/83643 "2025-06-05T21:39:16Z")

</div>

Hello young developers. CodePen ShaderText or WebPage ShaderText Codepen ShaderEditor or WebPage ShaderEditor Now that I have more time and after updating the Shader Editor, I also created a class to use the…

---

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

---

## [Wrong text aligment in HTMLMesh](https://discourse.threejs.org/t/wrong-text-aligment-in-htmlmesh/80121)

<div class="topic-metadata">

**Author:** [@yesbird](https://discourse.threejs.org/u/yesbird)\
**Replies:** 4\
**Last updated:** [March 26, 2025, 5:19pm UTC](https://discourse.threejs.org/t/wrong-text-aligment-in-htmlmesh/80121 "2025-03-26T17:19:20Z")

</div>

I am rendering math formulas with Mathjax and it works fine while rendering by regular HTML renderer, but I want to push result ro XR, so render it to HTMLMesh first, and it works too, but by strange reason loses alignm…

---

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

---

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

---

## [Make CSS2DObject follow cursor](https://discourse.threejs.org/t/make-css2dobject-follow-cursor/14221)

<div class="topic-metadata">

**Author:** [@jedinger](https://discourse.threejs.org/u/jedinger)\
**Replies:** 14\
**Last updated:** [May 3, 2024, 6:11am UTC](https://discourse.threejs.org/t/make-css2dobject-follow-cursor/14221 "2024-05-03T06:11:13Z")

</div>

Hi there! What’s the best way to make a CSS2DObject label follow the cursor?

---

## [HTML Text in threejs](https://discourse.threejs.org/t/html-text-in-threejs/64375)

<div class="topic-metadata">

**Author:** [@rinzexe](https://discourse.threejs.org/u/rinzexe)\
**Replies:** 17\
**Last updated:** [April 27, 2024, 3:19pm UTC](https://discourse.threejs.org/t/html-text-in-threejs/64375 "2024-04-27T15:19:09Z")

</div>

Is there any particular reason there isn’t any sort of html to three.js converter other than cssrenderer? Creating and managing text in threejs is so unnecessarily hard rn, I’d love to make simple looking sites that’d ha…

---

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

---

## [Double views how to load css2D（only one mesh）](https://discourse.threejs.org/t/double-views-how-to-load-css2d-only-one-mesh/54362)

<div class="topic-metadata">

**Author:** [@jiajun\_zhu](https://discourse.threejs.org/u/jiajun_zhu)\
**Replies:** 2\
**Last updated:** [July 30, 2023, 9:28am UTC](https://discourse.threejs.org/t/double-views-how-to-load-css2d-only-one-mesh/54362 "2023-07-30T09:28:08Z")

</div>

Regarding double views, based on this case, I have made some changes and would like to try displaying one mesh, two cameras, two controls, and two renderers in the scene. I want to add a css2D tag to the mesh, like mesh …

---

## [How to make a scene scrollable (y-achses) and interactive (x-achses)?](https://discourse.threejs.org/t/how-to-make-a-scene-scrollable-y-achses-and-interactive-x-achses/49440)

<div class="topic-metadata">

**Author:** [@nkzmi](https://discourse.threejs.org/u/nkzmi)\
**Replies:** 0\
**Last updated:** [March 22, 2023, 11:16am UTC](https://discourse.threejs.org/t/how-to-make-a-scene-scrollable-y-achses-and-interactive-x-achses/49440 "2023-03-22T11:16:33Z")

</div>

Hi Friends, I tested my scene on my mobile phone and I noticed that I am not able to scroll down when I touch an area within my scene. I tried to use CSS overflow-y: hidden but it did not work of course. How can we mak…

---

## [Change display size](https://discourse.threejs.org/t/change-display-size/43689)

<div class="topic-metadata">

**Author:** [@mrcow](https://discourse.threejs.org/u/mrcow)\
**Replies:** 8\
**Last updated:** [October 17, 2022, 3:59am UTC](https://discourse.threejs.org/t/change-display-size/43689 "2022-10-17T03:59:17Z")

</div>

Hello! I’ve been trying to fix this for a while but with no sucess. I have a canvas (showing as a red rectangle), I want my threejs scene to show inside that canvas, so I added a inside of the , the problem is, when I l…

---

## [Problem to position my buttons in a three.js scene](https://discourse.threejs.org/t/problem-to-position-my-buttons-in-a-three-js-scene/31734)

<div class="topic-metadata">

**Author:** [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Replies:** 0\
**Last updated:** [November 12, 2021, 7:25pm UTC](https://discourse.threejs.org/t/problem-to-position-my-buttons-in-a-three-js-scene/31734 "2021-11-12T19:25:54Z")

</div>

Hi, I don’t know how to place my buttons with inline-block 50% vertically from my scene. My example doesn’t work with percentage, but it works when I specify a pixel. I still specified “relative”. Could you tell me wh…

---

## [Infinite scroll bug when using full screen canvas & multiple scenes](https://discourse.threejs.org/t/infinite-scroll-bug-when-using-full-screen-canvas-multiple-scenes/31548)

<div class="topic-metadata">

**Author:** [@Degubi](https://discourse.threejs.org/u/Degubi)\
**Replies:** 4\
**Last updated:** [November 7, 2021, 3:56pm UTC](https://discourse.threejs.org/t/infinite-scroll-bug-when-using-full-screen-canvas-multiple-scenes/31548 "2021-11-07T15:56:01Z")

</div>

Hi all! I’ve been trying to figure out why my page has an ‘infinite scroll’ problem. When scrolling the page you can infinitely scroll into nothing on the ‘x’ and ‘y’ axes. (Also interesting is why is the ‘x’ axis scr…

---

## [3D Scroll-Based Product Landing-Page](https://discourse.threejs.org/t/3d-scroll-based-product-landing-page/29309)

<div class="topic-metadata">

**Author:** [@madebyAyan](https://discourse.threejs.org/u/madebyAyan)\
**Replies:** 10\
**Last updated:** [September 6, 2021, 4:10pm UTC](https://discourse.threejs.org/t/3d-scroll-based-product-landing-page/29309 "2021-09-06T16:10:19Z")

</div>

I’ve designed a dynamic 3D website for a project that I’m working it. The main design element that’s considered in making this is the mouse scroll and using it’s position to dynamically display content in real-time. It…

---

## [layout.css.devPixelsPerPx](https://discourse.threejs.org/t/layout-css-devpixelsperpx/29353)

<div class="topic-metadata">

**Author:** [@threejsman](https://discourse.threejs.org/u/threejsman)\
**Replies:** 1\
**Last updated:** [August 29, 2021, 11:02am UTC](https://discourse.threejs.org/t/layout-css-devpixelsperpx/29353 "2021-08-29T11:02:43Z")

</div>

Hello, recently I stumbled about kinda… problem. I wanted to have the browser bars and tabs in firefox being bigger with a bigger font size. After some research I got to the firefox layout.css.devPixelsPerPx option an…

---

## [How to properly scale the renderer?](https://discourse.threejs.org/t/how-to-properly-scale-the-renderer/27317)

<div class="topic-metadata">

**Author:** [@yunseok](https://discourse.threejs.org/u/yunseok)\
**Replies:** 2\
**Last updated:** [June 18, 2021, 10:29am UTC](https://discourse.threejs.org/t/how-to-properly-scale-the-renderer/27317 "2021-06-18T10:29:41Z")

</div>

Hi, I’m having a scaling issue where I want my canvas to be sized to my preferences. For context, I’m trying to make the canvas generated by Three.js to { width: 800, height: 512 } but the canvas results with this: //…

---

## [New Vector is added twice to scene](https://discourse.threejs.org/t/new-vector-is-added-twice-to-scene/24585)

<div class="topic-metadata">

**Author:** [@Chris\_de\_Jong](https://discourse.threejs.org/u/Chris_de_Jong)\
**Replies:** 2\
**Last updated:** [March 20, 2021, 3:04pm UTC](https://discourse.threejs.org/t/new-vector-is-added-twice-to-scene/24585 "2021-03-20T15:04:03Z")

</div>

Hi, I’ve added a html element to a perspectivecamera scene but the element is duplicated in the scene…demo at https://matox.nl/360/html/ . Please advice how to prevent this? I only want 1 element in the scene…not duplic…

---

## [Canvas border - how to remove](https://discourse.threejs.org/t/canvas-border-how-to-remove/14755)

<div class="topic-metadata">

**Author:** [@Topcio](https://discourse.threejs.org/u/Topcio)\
**Replies:** 4\
**Last updated:** [September 26, 2020, 12:01am UTC](https://discourse.threejs.org/t/canvas-border-how-to-remove/14755 "2020-09-26T00:01:36Z")

</div>

Helo everyone. I need help. Look on picture below, when animation is loaded everything looks ok, but when i click on it i see a border. How to remove that annoig border

---

## [Aligning HTML Elements to 3D](https://discourse.threejs.org/t/aligning-html-elements-to-3d/18135)

<div class="topic-metadata">

**Author:** [@79321](https://discourse.threejs.org/u/79321)\
**Replies:** 2\
**Last updated:** [August 25, 2020, 11:06am UTC](https://discourse.threejs.org/t/aligning-html-elements-to-3d/18135 "2020-08-25T11:06:18Z")

</div>

Hi all, please help, I got really stuck with this issue of aligning HTML to 3D, I tried everything I can, the problem seems to be in functions callbacks or something. I’m looking for a way to get result like this https:…

---

## [HTML / CSS Interfering with raycaster... I guess](https://discourse.threejs.org/t/html-css-interfering-with-raycaster-i-guess/14651)

<div class="topic-metadata">

**Author:** [@tfacchini](https://discourse.threejs.org/u/tfacchini)\
**Replies:** 6\
**Last updated:** [April 26, 2020, 11:35pm UTC](https://discourse.threejs.org/t/html-css-interfering-with-raycaster-i-guess/14651 "2020-04-26T23:35:15Z")

</div>

I’m currently having issues using rayCaster, I almost sure that my issue is due CSS / HTML Elements interference. Let me share some everything I consider relevant about my env and hopefully somebody with more experience…

---

## [How to use CSS in conjunction with a scene](https://discourse.threejs.org/t/how-to-use-css-in-conjunction-with-a-scene/5696)

<div class="topic-metadata">

**Author:** [@Ayma](https://discourse.threejs.org/u/Ayma)\
**Replies:** 3\
**Last updated:** [January 13, 2019, 7:27pm UTC](https://discourse.threejs.org/t/how-to-use-css-in-conjunction-with-a-scene/5696 "2019-01-13T19:27:54Z")

</div>

I have and would like to divide 1/2 of the page into 1) a scene, 2) an . So far, I’ve been using window.innerWidth\*0.5, window.innerHeight and it works. I’m wondering if there are any additional ways that I can achieve t…

---

## [Loading Screen for your next project](https://discourse.threejs.org/t/loading-screen-for-your-next-project/5472)

<div class="topic-metadata">

**Author:** [@iatkrox2](https://discourse.threejs.org/u/iatkrox2)\
**Replies:** 4\
**Last updated:** [December 26, 2018, 10:32am UTC](https://discourse.threejs.org/t/loading-screen-for-your-next-project/5472 "2018-12-26T10:32:37Z")

</div>

Sets of free css loaders for your inspiration…No js Required. :slight\_smile: 40+ Creative CSS Loaders

---

## [Styling Dat.GUI (Layer Example)](https://discourse.threejs.org/t/styling-dat-gui-layer-example/4717)

<div class="topic-metadata">

**Author:** [@Alex\_Pryor](https://discourse.threejs.org/u/Alex_Pryor)\
**Replies:** 5\
**Last updated:** [October 30, 2018, 6:48am UTC](https://discourse.threejs.org/t/styling-dat-gui-layer-example/4717 "2018-10-30T06:48:03Z")

</div>

Hey all, I am trying to research how to style a Dat.GUI toggle menu, particularly the one in the layers menu: https://threejs.org/examples/webgl\_layers.html I can’t find much documentation about Dat.GUI styling. I wan…

---

## [Automatic height for render](https://discourse.threejs.org/t/automatic-height-for-render/1058)

<div class="topic-metadata">

**Author:** [@fabiencomte](https://discourse.threejs.org/u/fabiencomte)\
**Replies:** 2\
**Last updated:** [October 23, 2017, 12:58pm UTC](https://discourse.threejs.org/t/automatic-height-for-render/1058 "2017-10-23T12:58:10Z")

</div>

Hello, I have a page with text at top and a render a bottom. I have height : auto for text, i wish that render fit to the free part of the window but i cannot find the right parameters. Does someone have an idea please …

---

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