Moving GUI Image with 3D Model

Hello,

I am fairly new to Babylon JS. I have a 3D Model of a Steel production Caster which I want to render. On the top of the 3D Model, I want to put small sensors which are images of green checkbox and red checkbox at a random location on the 3D Model. I am able to put those images on the 3D Model however they don’t rotate with the 3D Model. They are always static. Is there any way where I can make the images move with the 3D Model.

Following is my code.


    <div class="myContainer">
    <canvas id="renderCanvas" style="border-color:white !important;"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");

        var createScene = function () {
            // Create scene
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);

            // Default Environment
            var environment = scene.createDefaultEnvironment({ enableGroundShadow: true, groundYBias: 1 });

            var hpi = Math.PI / 2;
            var camera = new BABYLON.ArcRotateCamera("camera1", -hpi, hpi, 100, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, false);

            var building = BABYLON.SceneLoader.Append("/Content/3DMODEL/", "senkrechtcaster_schere_QLgame.glb", scene, function (meshes) {
                scene.createDefaultCameraOrLight(true, true, true);
            });

            var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

            var image = new BABYLON.GUI.Image("but", "/Content/Images/on.png");
            image.width = "30px";
            image.height = "30px";
            image.top = "-125px;"
            image.right = "130px";
            image.rotation = 0.2;

            var image2 = new BABYLON.GUI.Image("but", "/Content/Images/off.png");
            image2.width = "30px";
            image2.height = "30px";
            advancedTexture.addControl(image2)


            var image3 = new BABYLON.GUI.Image("but", "/Content/Images/off.png");
            image3.width = "30px";
            image3.height = "30px";
            image3.top = "150px;"
            image3.right = "230px";
            advancedTexture.addControl(image3)


            return scene;
        };

        var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
        var scene = createScene();
        engine.runRenderLoop(function () {
            if (scene) {
                scene.render();
            }
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</div>

Following is the link to my playground.
https://www.babylonjs-playground.com/#HR6IDD#1

Any help is appreciated,

Hello and welcome to the forum :slight_smile:

Could you try to recreate your scene in the playground ? this might be way easier to let the entire community jump in and help.

but I guess that basically you want your gui being displayed on a plane attached to the mesh and use the CreateForMesh functionnality of the advancedDynamicTexture.

or you might need to consider using some 3d gui: Use the Babylon 3D GUI - Babylon.js Documentation

Hello Sebavan,

Thank you for your reply. I am trying to recreate my scene in the playground however unable to do it.
Do you know how can I use my 3D model which I have uploaded on google drive to use it on the following line to render it?

var building = BABYLON.SceneLoader.Append("/Content/3DMODEL/", “senkrechtcaster_schere_QLgame.glb”, scene, function (meshes) {
scene.createDefaultCameraOrLight(true, true, true);
});

following is the link to my 3d model on Google drive

This is my playground which I have recreated
https://www.babylonjs-playground.com/#HR6IDD

Thank you for your help

This can help as I do not think you could do it from gdrive: Using External Assets - Babylon.js Documentation

Else you could use a box or a sphere instead :slight_smile: it would probably be enough

that really helped me. Thank you. I have added the 3D Model and the images.
Please have a look at it and suggest. :slight_smile:

https://www.babylonjs-playground.com/#HR6IDD#1

Great, now everybody can help :slight_smile:

Here you could definitely use the 3d GUI for that like a Use the Babylon 3D GUI - Babylon.js Documentation

So that it would not fill weird when rotating.

But I am pretty sure the community might come back with other ideas :slight_smile:

I am using 3D GUI to render the Green checkmark and Red Checkmark images on the model. But I cannot figure out how can I make them rotate with the model. Could you please help me on this?

Actually you are using the 2d gui not 3d so it lives in screen space and not object space making it harder to mix with the 3d world.

got it. I will try to use 3d button in this case.

1 Like

Hello, I tried creating a 3D button which doesn’t seem to appear on the plane, its not rendering. Can you please have a look at it ?

https://www.babylonjs-playground.com/#HR6IDD#2

As it is in the 3d world, you also need to account for the scale and so on of the button: https://www.babylonjs-playground.com/#HR6IDD#7

thanks for quick response. Is there any way I can include the “Green Checkbox” or “Red check box” image inside the button, so that instead of rendering the button, I want those image to appear.

I replaced button.content with image and it is kind of working.

Yup there should be all the examples in the 3d gui doc for this part :slight_smile:

I have reworked a bit the example to remove all the typos, it should help you to go further.

https://www.babylonjs-playground.com/#HR6IDD#14

thank you for this. However, i have got some doubts, it would be great if you can please point me in correct direction. I am able to render the image inside the button, however button always appears to be square, is there any way I can change size of the button to make it more circular so that it can adapt the image which I am putting inside it. Also, the position of button appears to view behind the 3D model, is there any way I can bring it front as soon as the 3d model is rendered. And one last question I want the image to be appeared in front as well as back side, right now it just appears in the front.

I am sorry to bother with all these doubts.
https://www.babylonjs-playground.com/#HR6IDD#15

What you want here is to create a fully custom mesh for your inputs: Use the Babylon 3D GUI - Babylon.js Documentation.

Then you will be able to customize the model as you witsh.

regarding the position it can be controlled like any mesh with .position and then you ll be able to place it wherever it most fit with your model.

Hello Sebavn, I am trying to run the https://www.babylonjs-playground.com/#HR6IDD#15 code in Visual studio. Could you please tell me things needs to be added to render the 3d Model? Because just using the source code in PLayground is not sufficient to render the 3d model as it requires camera and other details.

You should try to download the zip which contains all the extra code mainly the runRenderLoop method.

it worked. just a simple doubt,
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
doesn’t seems to work for me on https://www.babylonjs-playground.com/#HR6IDD#15

Is there something to be changed?

It works but you are creating an environment so everything is in the box meaning you never see the clear color :wink:

1 Like