Use iFrame in PlayCanvas scene

Help & Support
21

I didn’t set any stencil parameters. I guess render order cause the problem, in the iframePlane.js code there is such a material:

    this._css3Plane = new pc.Css3Plane(element, this.entity, this.pixelsPerUnit);
    var material = new pc.StandardMaterial();
    material.depthWrite = true;
    material.redWrite = false;
    material.greenWrite = false;
    material.blueWrite = false;
    material.alphaWrite = false;
    material.blendType = pc.BLEND_NONE;
    material.opacity = 0;
    material.update();
    this.entity.render.material = material;

I found that all models created after the material was created will be rendered and cover the hole, while models that were added to the scene before the material was created will be rendered normally(thrown out when depthtest). How should I do to properly dig holes?

22

Whatever the layer this entity is on, needs to be rendered first before the rest of the scene.

23

I don’t know how to fix it.
But I repeat the bug in this project, the code causes the bug is in addbox.js. When I change mat, box display error

project:
https://playcanvas.com/project/1035353/overview/youtube-in-3d

Addbox.prototype.initialize = function () {
    let box = new pc.Entity();
    box.addComponent('render', { type: 'box' });
    box.setLocalPosition(0, 0, -3);
    this.app.root.addChild(box);

    setTimeout(() => {
        this.newmat = box.render.material.clone();
        this.newmat.update();
        box.render.material = this.newmat;

    }, 10000);


};

After 10 sec, box will cover iframe.

4
4548×521 158 KB

24

Had a look, it is a render order problem as both the css3 plane and the box are on the same layer, the order is defined by the material for the opaque layer.

Creating a new layer (Before World) and moving that to render before the World layer, setting the plane to render on Before World solves this issue as it’s rendering first.

image
image958×1474 84.1 KB

image
image950×1514 71.2 KB

Project https://playcanvas.com/project/1037227/overview/f-youtube-in-3d

1 Like
25

Cool. Thank you very much. :wink:

Perhaps you can add this modification to this project to prevent more people from encountering this problem
https://playcanvas.com/project/751877/overview/youtube-in-3d-scenes

26

We are no longer supporting that project so we won’t be doing any more work to it

image
image1948×498 124 KB

27

Why not supported anymore? Any security concerns? @yaustar

28

There were too many issues with iframe alignment and touch/mouse events across browsers that it wasn’t worth the time of support for the small number of use cases.

In your particular case, it won’t work for VR because it still uses a HTML DOM element for the iframe.

29

I wasn’t asking this particular question for VR as I understand dom element won’t render for VR unless brought in webGL context, I was asking in general in case the project posed any major flaw or something.
Got it now, thanks @yaustar .

30

Nooo! OMG :frowning: PlayCanvas is amazing not only for games. It’s a good engine for Web 3D and Metaverses, and all of these kind of projects NEEDS iframes to work. All our projects use iframe inside playcanvas!

31

I agree with that statement

32

Does Playcanvas have any plans to reopen the project? I need it for web 3D and metaverse as well. I think it will be an essential feature not only for me, but for all future PlayCanvas users.

33

I don’t think so, the project is still there with all the source code if someone else likes to look at solving the issues that people are running into

34

Well, what a pity.

I had taught more than 100 students in streaming courses to make web3d with PlayCanvas.

but due to this situation we have to change the agenda to stop using PlayCanvas and start using other options such as 3D Vista.

I loved PlayCanvas but this huge issue kills an entire industry that needs iframes inside 3D.

I suppose that the Gaussian Splattering industry is much larger than that of websites or showrooms for companies.

2 Likes