# Using a CSS file into BabylonJS for meshes for example

**URL:** <https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711>\
**Category:** Questions\
**Created:** [June 5, 2019, 9:25am UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711 "2019-06-05T09:25:15Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [June 5, 2019, 9:25am UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/1 "2019-06-05T09:25:15Z")

</div>

Hi there !

I have a question for you, 2 days ago I have found a web viewer for virtual tour : [https://www.marzipano.net/](https://www.marzipano.net/)  
It’s a very good viewer , but I would like to take the CSS file and to include it in my code. But don’t find how to do it…  
It’s for my work, these “hotspots” are very professional, and I want to include them, especially the “info hotspot”. Here the example of a demo : [Sample Tour | Marzipano](https://www.marzipano.net/demos/sample-tour/).

Here is the code of the function to create the info hotspot :  
function createInfoHotspotElement(hotspot) {

```
// Create wrapper element to hold icon and tooltip.
var wrapper = document.createElement('div');
wrapper.classList.add('hotspot');
wrapper.classList.add('info-hotspot');

// Create hotspot/tooltip header.
var header = document.createElement('div');
header.classList.add('info-hotspot-header');

// Create image element.
var iconWrapper = document.createElement('div');
iconWrapper.classList.add('info-hotspot-icon-wrapper');
var icon = document.createElement('img');
icon.src = 'img/info.png';
icon.classList.add('info-hotspot-icon');
iconWrapper.appendChild(icon);

// Create title element.
var titleWrapper = document.createElement('div');
titleWrapper.classList.add('info-hotspot-title-wrapper');
var title = document.createElement('div');
title.classList.add('info-hotspot-title');
title.innerHTML = hotspot.title;
titleWrapper.appendChild(title);

// Create close element.
var closeWrapper = document.createElement('div');
closeWrapper.classList.add('info-hotspot-close-wrapper');
var closeIcon = document.createElement('img');
closeIcon.src = 'img/close.png';
closeIcon.classList.add('info-hotspot-close-icon');
closeWrapper.appendChild(closeIcon);

// Construct header element.
header.appendChild(iconWrapper);
header.appendChild(titleWrapper);
header.appendChild(closeWrapper);

// Create text element.
var text = document.createElement('div');
text.classList.add('info-hotspot-text');
text.innerHTML = hotspot.text;

// Place header and text into wrapper element.
wrapper.appendChild(header);
wrapper.appendChild(text);

// Create a modal for the hotspot content to appear on mobile mode.

```

// var modal = document.createElement(‘div’);  
// modal.innerHTML = wrapper.innerHTML;  
// modal.classList.add(‘info-hotspot-modal’);  
// document.body.appendChild(modal);

```
var toggle = function() {
  wrapper.classList.toggle('visible');
 // modal.classList.toggle('visible');
};

// Show content when hotspot is clicked.
wrapper.querySelector('.info-hotspot-header').addEventListener('click', toggle);

// Hide content when close icon is clicked.

```

// modal.querySelector(’.info-hotspot-close-wrapper’).addEventListener(‘click’, toggle);

```
// Prevent touch and scroll events from reaching the parent element.
// This prevents the view control logic from interfering with the hotspot.
stopTouchAndScrollEventPropagation(wrapper); // it's not necessary for my code

return wrapper;

```

}

And there is the code in the “main” :  
data.infoHotspots.forEach(function(hotspot) {  
var element = createInfoHotspotElement(hotspot);  
scene.hotspotContainer().createHotspot(element, { yaw: hotspot.yaw, pitch: hotspot.pitch }); // Here is my problem  
});

**My Problem:** : I don’t know how to include that in BabylonJS canvas. Because the scene is not a “BABYLONJS Scene” so I don’t know how to display on the screen. The first function seems to run btw.

My best regards,  
Mathieu, an intern in webVR

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [June 5, 2019, 12:07pm UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/2 "2019-06-05T12:07:09Z")

</div>

It would not be part of the canvas but they are all elements living in the DOM around the canvas itself. Babylon will not manage those as it only manages the webgl part of the page.

---

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [June 5, 2019, 12:10pm UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/3 "2019-06-05T12:10:18Z")

</div>

Hi, so I can display it on the screem ? But It does not depend on Babylon? Do I understand correctly ?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [June 5, 2019, 12:14pm UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/4 "2019-06-05T12:14:14Z")

</div>

Yes exactly it is in the HTML but not part of Babylon, Babylon would manage the rendering of the scene so the image in the example you provided.

---

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [June 5, 2019, 12:17pm UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/5 "2019-06-05T12:17:14Z")

</div>

I understand but in this code, it is in the javascript code that’s why I am asking. Thank you for the answer.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [June 5, 2019, 12:19pm UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/6 "2019-06-05T12:19:40Z")

</div>

Yes but all the code you provided in JS here is only updating the HTML not interacting with the canvas or webgl.

---

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [June 5, 2019, 12:22pm UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/7 "2019-06-05T12:22:26Z")

</div>

Yes it is in the function “createHotspot” function, but it is a special function of Marzipano with Marzipano’s element

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [June 5, 2019, 12:39pm UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/8 "2019-06-05T12:39:21Z")

</div>

scene.hotspotContainer().createHotspot(element, { yaw: hotspot.yaw, pitch: hotspot.pitch });

oh I see so here you could rely on either Babylon.js GUI to create the element so at least it would work great in VR. pure HTML would not be visible in VR.

@trevordev could definitely help with that part 🙂

---

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [June 5, 2019, 2:32pm UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/9 "2019-06-05T14:32:16Z")

</div>

Yes sorry if I wasn’t clear enough 🙂

---

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [June 5, 2019, 2:34pm UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/10 "2019-06-05T14:34:47Z")

</div>

Here is the code of the class hotspotContainer : [marzipano/HotspotContainer.js at master · google/marzipano · GitHub](https://github.com/google/marzipano/blob/master/src/HotspotContainer.js)  
The function CreateHotspot is on line 165.

---

<div class="post-metadata">

**Author:** ![trevordev](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/trevordev/32/16_2.png) [@trevordev](https://forum.babylonjs.com/u/trevordev)\
**Post date:** [June 5, 2019, 5:18pm UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/11 "2019-06-05T17:18:27Z")

</div>

Unfortunately like Sebavan mentioned none of the html/css is compatible while in webVR as dom overlays is not supported by the browser. To get this kind of functionality you would have to convert each dom element to a babylon in world GUI element using BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh. See how this is done here [https://playground.babylonjs.com/#TAFSN0#2](https://playground.babylonjs.com/#TAFSN0#2) and you should be able to use any gui element described here [Use the Babylon GUI - Babylon.js Documentation](https://doc.babylonjs.com/how_to/gui)

---

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [June 6, 2019, 8:10am UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/12 "2019-06-06T08:10:31Z")

</div>

Thank you for the response. Do you know how I can set them in the space otherwise with linkwithMesh ? Because when I use it; on firefox, it’s lagging , it’s not fluid when I “look at them”.

---

<div class="post-metadata">

**Author:** ![trevordev](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/trevordev/32/16_2.png) [@trevordev](https://forum.babylonjs.com/u/trevordev)\
**Post date:** [June 6, 2019, 4:27pm UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/13 "2019-06-06T16:27:33Z")

</div>

Do you have a specific playground you are talking about? This one seems to work fine: [https://playground.babylonjs.com/#TAFSN0#2](https://playground.babylonjs.com/#TAFSN0#2)

---

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [June 7, 2019, 8:08am UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/14 "2019-06-07T08:08:38Z")

</div>

There is no linkWithMesh in this plauground. Yes I have one, sorry : [Babylon.js Playground](https://playground.babylonjs.com/#M779CA).  
When you are looking at the GUI when you are in VR, it’s lagging a little bit. Soon as you don’t have the GUI on your screen, it’s not lagging anymore. And If you comment the function “linkWithMesh” it’s not lagging anymore.

---

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [June 7, 2019, 8:35am UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/15 "2019-06-07T08:35:52Z")

</div>

I have found a solution I guess. I will use your example trev, I will just give up my sphere, and take ellipse ^^ Thank you.

---

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [June 7, 2019, 8:41am UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/16 "2019-06-07T08:41:09Z")

</div>

But the only problem is when the GUI is not in front of you, the GUI text is not in front of you too

---

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [June 7, 2019, 8:51am UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/17 "2019-06-07T08:51:07Z")

</div>

Here is a code which is positioning/rotating the text to be in front of you whatever the position where is the text. [https://www.babylonjs-playground.com/#FFACFW#27](https://www.babylonjs-playground.com/#FFACFW#27) But just when it is creating, not when you are looking at elsewhere. I try my best to check all the situation possible.

---

<div class="post-metadata">

**Author:** ![trevordev](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/trevordev/32/16_2.png) [@trevordev](https://forum.babylonjs.com/u/trevordev)\
**Post date:** [June 7, 2019, 6:23pm UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/18 "2019-06-07T18:23:34Z")

</div>

I think the issue is that you are using AdvancedDynamicTexture.CreateFullscreenUI instead of AdvancedDynamicTexture.CreateForMesh. CreateFullscreenUI is not supported for webVR so I think that is causing the issue. Would that work for you?

---

<div class="post-metadata">

**Author:** ![Mathieu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathieu/32/1418_2.png) [@Mathieu](https://forum.babylonjs.com/u/Mathieu)\
**Post date:** [June 11, 2019, 8:18am UTC](https://forum.babylonjs.com/t/using-a-css-file-into-babylonjs-for-meshes-for-example/3711/19 "2019-06-11T08:18:54Z")

</div>

Yeah I am using the tips you gave to me and it’s work 🙂