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>
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.
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
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?
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.
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.
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.
