Open iFrame with Babylonjs button

Questions
1

I am having a hard time to open an iframe with a Babylonjs button. I do not understand how do I link the iframe to this button. That is onclick of this button, the iframe should open.

    <iframe
  src="myWebsite.com"
  style="
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    right: 100px;
    height: 80%;
    width: 80%;
    overflow: hidden;
    z-index: 10;
  ">
</iframe>

    <script>
        var canvas = document.getElementById("renderCanvas");

        var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
        var createScene = function () {
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

       // GUI
    var plane = BABYLON.Mesh.CreatePlane("plane", 2);
    plane.position.y = 2;

    var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane);

    var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Open Iframe");
    button1.width = 1;
    button1.height = 0.4;
    button1.color = "white";
    button1.fontSize = 50;
    button1.background = "green";
    button1.onPointerUpObservable.add(function() {
        
    });
    advancedTexture.addControl(button1);

    return scene;
};
2

You may have a look at this example (view-source) - Click on 3D Model Opens Modal Window with Specific WordPress Post – BabylonPress
Iframe opens in modal window when clicking a mesh.
For your case you need just to write a function which would show iframe on button click (probably inside some parent div or other DOM element for easier control).

1 Like