# CSS3DObject not showing in the browser

**URL:** <https://discourse.threejs.org/t/css3dobject-not-showing-in-the-browser/21754>\
**Category:** Questions\
**Tags:** css-renderer\
**Created:** [December 18, 2020, 8:25am UTC](https://discourse.threejs.org/t/css3dobject-not-showing-in-the-browser/21754 "2020-12-18T08:25:38Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![w99910](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/w99910/32/14080_2.png) [@w99910](https://discourse.threejs.org/u/w99910)\
**Post date:** [December 18, 2020, 8:25am UTC](https://discourse.threejs.org/t/css3dobject-not-showing-in-the-browser/21754/1 "2020-12-18T08:25:38Z")

</div>

Hello … I’m having issues that my css3dObject is not showing in the browser. At first I create the div element and then I create css3dObject of that div and add to scene . When I debug the scene children, there is css3dobject that I created but object is not there in the browser.  
I use renderer as WebGLRenderer.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [December 18, 2020, 9:40am UTC](https://discourse.threejs.org/t/css3dobject-not-showing-in-the-browser/21754/2 "2020-12-18T09:40:50Z")

</div>

@w99910 Have you added an instance of [CSS3DRenderer](https://threejs.org/docs/index.html#examples/en/renderers/CSS3DRenderer)? Please show us some code.

---

<div class="post-metadata">

**Author:** ![w99910](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/w99910/32/14080_2.png) [@w99910](https://discourse.threejs.org/u/w99910)\
**Post date:** [December 18, 2020, 10:14am UTC](https://discourse.threejs.org/t/css3dobject-not-showing-in-the-browser/21754/3 "2020-12-18T10:14:08Z")

</div>

[Here is the code](https://github.com/w99910/Threejs/blob/7aabd4fbf95065e72bb7095b09ebb322937bf135/main.js)  
My relevant code is at line 437.  
I’m sorry if my code is not cleaned.  
[Here](https://w99910.github.io/Threejs/) is the live\_demo.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [December 18, 2020, 10:36am UTC](https://discourse.threejs.org/t/css3dobject-not-showing-in-the-browser/21754/4 "2020-12-18T10:36:53Z")

</div>

@w99910 ok thanks, yes you have missed declaring and initializing an instance of the css3d renderer,

```
const cssRenderer = new CSS3DRenderer(); 

```

you can render the css to a new scene, say cssScene and render it on top of your webgl scene…

if you set up a codepen or similar i could help more…

---

<div class="post-metadata">

**Author:** ![w99910](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/w99910/32/14080_2.png) [@w99910](https://discourse.threejs.org/u/w99910)\
**Post date:** [December 18, 2020, 11:20am UTC](https://discourse.threejs.org/t/css3dobject-not-showing-in-the-browser/21754/5 "2020-12-18T11:20:15Z")

</div>

I did declare that at line 447 and render the scene at line 288 in animate function.  
but still not working. I tried to setup codepen io [here](https://codepen.io/w99910/pen/MWjbrJR).

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [December 18, 2020, 11:22am UTC](https://discourse.threejs.org/t/css3dobject-not-showing-in-the-browser/21754/6 "2020-12-18T11:22:45Z")

</div>

@w99910 sorry i did just see that in your code as css\_render,

i’ve set you one up here…

https://codepen.io/forerunrun/embed/preview/gOwRgzE?height=300&slug-hash=gOwRgzE&default-tabs=js,result&host=https://codepen.io

i will try to look into why it’s not rendering now

---

<div class="post-metadata">

**Author:** ![w99910](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/w99910/32/14080_2.png) [@w99910](https://discourse.threejs.org/u/w99910)\
**Post date:** [December 18, 2020, 11:37am UTC](https://discourse.threejs.org/t/css3dobject-not-showing-in-the-browser/21754/7 "2020-12-18T11:37:09Z")

</div>

Thanks you in advance for helping me. I’m still finding the solution too.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [December 18, 2020, 11:47am UTC](https://discourse.threejs.org/t/css3dobject-not-showing-in-the-browser/21754/8 "2020-12-18T11:47:12Z")

</div>

it’s difficult to read the structure of your js, i’m not that advanced but i think you have to .appendChild of (cssRenderer.domElement); before .appendChild of ( renderer.domElement );  
and then animate at the end in the same order, not sure why your animate function is in the middle, i’m sure that should be the last thing in sequence to be processed.

also i think you can try

```
   renderer.clear = true;
   renderer.depthTest = true;
```

---

<div class="post-metadata">

**Author:** ![w99910](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/w99910/32/14080_2.png) [@w99910](https://discourse.threejs.org/u/w99910)\
**Post date:** [December 18, 2020, 11:59am UTC](https://discourse.threejs.org/t/css3dobject-not-showing-in-the-browser/21754/9 "2020-12-18T11:59:24Z")

</div>

Sorry for my bad code structure. I think I’m close to the solution. The two scenes are working but it’s like one scene overlap to another. I tried changing css-properties like z-index and didn’t still work out as expected. Fresh code-pen [here](https://codepen.io/w99910/pen/MWjbrJR) .

---

<div class="post-metadata">

**Author:** ![w99910](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/w99910/32/14080_2.png) [@w99910](https://discourse.threejs.org/u/w99910)\
**Post date:** [December 18, 2020, 12:15pm UTC](https://discourse.threejs.org/t/css3dobject-not-showing-in-the-browser/21754/10 "2020-12-18T12:15:27Z")

</div>

@Lawrence3DPK  
Yay … I did solve it. It’s because of setClearColor function of renderer.  
[Here](https://codepen.io/w99910/pen/MWjbrJR) is the working demo

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [December 18, 2020, 12:37pm UTC](https://discourse.threejs.org/t/css3dobject-not-showing-in-the-browser/21754/11 "2020-12-18T12:37:26Z")

</div>

ahhh cool! perfect!

glad to hear!