How to mix div and canvas together

[FBplus]

Hi,guys,I am recently trying to mix div and canvas together according to the post here:
https://forum.playcanvas.com/t/3d-plane-with-website/2723/6,all seems fine but I am facing a problem at the last step,how to make the background div visible.

At first I tried to add the div in front of the canvas but the div is always block the 3d object no mater what their position is:

So I added the div behind the canvas and enabled transparent canvas in the render settings,tried to make the material transparent by the following code:

        var material = new pc.StandardMaterial();
        material.depthWrite = true;
        material.redWrite = false;
        material.greenWrite = false;
        material.blueWrite = false;
        material.alphaWrite = true;
        material.blendType = pc.BLEND_NORMAL;
        material.opacity = 0;
        material.update();
        node.material = material;

But the div is completely invisible like this:

By setting the opacity to some other value like 0.5 make the div looks wierd:

The test project can be found here:https://playcanvas.com/project/732288/overview/css3d
can anyone give me some advice,thanks a lot

[Leonidas]

Nice project! Could you elaborate a bit on what is pc.Css3Plane and how does it manage to render on a pc.Material?

[FBplus]

The pc.Css3Plane is a constructer which create a domElement in html and a 3d plane in game scene and merge them together,update the domElement transform according to the 3d plane every frame so they look the same to the viewer.

var css3Plane = new pc.Css3Plane();
var domElement = css3Plane.element;
var planeEntity = css3Plane.planeEntity;
// change the transform of the planeEntity will update the domElement too
planeEntity.rotate(10,10,10);
// you can attach the domElement to an existing plane in game editor,change its transform and see the result
css3Plane.attachPlane(anotherPlaneEntity);

the problem I’m facing is how to sort the z-index of the domElement and webgl 3d objects so they can occlusion correctly.A tricky solution is make the canvas transparent,render the div behind it,and set the planeEntity attached to that div transparent too so the div behind the canvas will be shown.but I don’t know the correct way to do that

[Leonidas]

Any idea why when I launch your project I get this, blank transparent planes instead of something like your last pic, the youtube screengrabs rendered:

[FBplus]

Yeah,that’s another problem I am facing ,I guess that may be a compatibility issue?I have the same problem on the computer in my home,even on the same browser(chrome).open the console you will find the div’s position is correct but they are just not shown,It’s really wierd.

[FBplus]

It’s really wierd,on the same computer but different browser the div also shows different

by clicking the blank iframe I can even hear the video is playing but there is just no image

[Kulodo133]

@FBplus

I changed these settings and it seems to be better.

        material.depthWrite = true;
        material.redWrite = false;
        material.greenWrite = false;
        material.blueWrite = false;
        material.alphaWrite = false; // changed from true.
        material.blendType = pc.BLEND_NONE; // changed from  pc.BLEND_NORMAL
        material.opacity = 0;

[FBplus]

@Kulodo133 It works,thanks so much

[FBplus]

Thanks for the assistance of @Kulodo133,now it works perfectly

[yaustar]

Nice work! Would you be okay if I forked the project and add it to the tutorials page?

[FBplus]

Sure!
But this is just a test project and the code needs to be optimized,I don’t know if that’s OK?

[yaustar]

Sounds good, thanks!

[FBplus]

@yaustar I tried my best to optimize the code and add some code comments，I hope it helps.

[yaustar]

Thanks!

[yaustar]

I’ve made some minor tweaks to the fork here: https://playcanvas.com/project/751877/overview/youtube-in-3d-scenes

Thanks again!

[Kulodo133]

The size is a bit off in Mac Safari. OK in Chrome.

[yaustar]

Oh fudge

[yaustar]

Thanks for that. Turns out Safari doesn’t like decimals in div height/width CSS .

Fixed!

[Kulodo133]

Cool, that was quick. This is a really useful feature, do you think you would officially add it to the engine? Should @FBplus try and win the $1000

[yaustar]

Not sure if it will an official engine feature? Keeping it as an extension would be nice. I talk to @will and see what works!

Having trouble with touch events though which I’m looking at.