CSS3DObject not showing in the browser

Questions
1

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.

2

@w99910 Have you added an instance of CSS3DRenderer? Please show us some code.

3

Here is the code
My relevant code is at line 437.
I’m sorry if my code is not cleaned.
Here is the live_demo.

4

@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…

5

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.

6

@w99910 sorry i did just see that in your code as css_render,

i’ve set you one up here…

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

1 Like
7

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

1 Like
8

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;
9

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 .

10

@Lawrence3DPK
Yay … I did solve it. It’s because of setClearColor function of renderer.
Here is the working demo

1 Like
11

ahhh cool! perfect!

glad to hear!

1 Like