Clickable dot babylon model (hyperlink)

Questions
1

Hi there, I am new to Babylon.js and this forum and love what Babylon.js can do. I recently worked, for the first time, with Babylon.js. I needed hyperlinks inside the 3d space and had to use a workaround as I couldn’t find a way of making my loaded .BABYLON model clickable. Instead, I put a sphere around the model and made it invisible. This meant a lot of extra work. Is there a way to make a .BABYLON imported model clickable (and a GLFT for that matter)? Below is the workaround code I used.
Thank you.

mySphere10.actionManager = new BABYLON.ActionManager(scene);

        	mySphere10.actionManager.registerAction(
            new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,
                function(event) {
                    var pickedMesh4 = event.meshUnderPointer;

                    window.open("pre_launch_reflect.html", "_self");
                })
2

Hello and welcome !!!

It should work in the exact same way with imported models. Could you provide a repro in the playground of when it does not ?

3

Hi Sebavan, thanks for your response. I have tried to put my code into the playground, but as I am new to Babylon, I couldn’t get it to work (I have html markup and external files).

The code in my initial post works fine. I can surround anything within my scene with a sphere, make it invisible, and I have it become a hyperlink. However I want the hyperlink functionality attached to a model loaded via a .babylon file (ModelToBecomeLink.babylon). Below is the code to load the model (from the Blender exporter). I just don’t know the syntax to use to attach the link to the .babylon file (the workaround sphere code is there too).
Thanks.
Edit: I found this in the playground…the code is similar. So how would you attach a hyperlink to this whole model

<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var engine_mount1 = new BABYLON.Engine(canvas, true);

    BABYLON.SceneLoader.Load("", "ModelToBecomeLink.babylon", engine_mount1, function(scene) {

        var light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(-1, 10, 0), scene);
        light.diffuse = new BABYLON.Color3(.7, .7, .7);
        light.specular = new BABYLON.Color3(.5, .5, .5);
        light.groundColor = new BABYLON.Color3(0, 0, 0);

        engine_mount1.runRenderLoop(function() {
            scene.render();
        });

        window.addEventListener("resize", function() { // Watch for browser/canvas resize events
            engine_mount1.resize();
        });

        var mat = new BABYLON.StandardMaterial("mat", scene);
        mat.diffuseColor = BABYLON.Color3.Red();
        mat.alpha = 0.0; //set to invisible

        var mySphere2 = BABYLON.MeshBuilder.CreateSphere("mySphere2", {
            diameterZ: 1.45, //back front
            diameterX: 1.45,
            diameterY: 1.45, //up
        }, scene);
        mySphere2.material = mat;


        mySphere2.position.y = 2.20; //height
        mySphere2.position.x = 0.88; //in front (pos num) bigger-left right
        mySphere2.position.z = -3.5 //front back bigger-back

        mySphere2.actionManager = new BABYLON.ActionManager(scene);

        mySphere2.actionManager.registerAction(
            new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,
                function(event) {
                    var pickedMesh4 = event.meshUnderPointer;

                    window.open("https://www.w3schools.com/", "_self");
                })
        );

    });
</script>
4

You need to either apply it to every meshes or create a fake one around it.

5

Thanks Sebavan for your help.
I think I have solved my issue. I used this playground as reference and simply inserted window.open(“https://www.a_website.com/”, “_self”); in the createGUIButton function

1 Like
7

not sure what you mean ?