Add a webpage as part of the ImagePanorama

[perfectpluto]

Hi everyone,

I am working on 360 images and using Panolens to do most of the stuff. However, I am stumped on a task. I have an ImagePanorama I added to a Viewer. The 360 image I uploaded is a picture of a room with a television on the wall. I would like to display some content in place of the "black screen" (could be a webpage or a Youtube video as shown in this example - http://jeromeetienne.github.io/videobrowser4learningthreejs/). I noticed I need to use CSS3Renderer for this. But I am not able to add this successfully. Has anyone done this using panolens? If so, could you please shed some light on how to go about this task?

Here is my app: https://www.awesomescreenshot.com/video/3971476?key=f422fb548a66a97890771b9559796fe3

Here is what I tried so far (using the link above), but no luck.. (pasting only relevant parts of the code). I was trying to add an external image first and then move on to an iframe, if this worked..

        import CSS3DObject from 'three/examples/js/renderers/CSS3DRenderer';
        ...
        ...
        const element = document.createElement('img');
        element.src = 'https://gblobscdn.gitbook.com/spaces%2F-LwY_OXUQHvmdEoy0xNa%2Favatar.png';
        // create the object3d for this element
        var cssObject = new CSS3DObject(element);
        // we reference the same position and rotation
        cssObject.position = panorama.position;
        cssObject.rotation = panorama.rotation;
        // add it to the css scene
        panorama.add(cssObject);