Using GLB in NME

Questions
1

Hello,

I have a code, where I load glb file, then get its components by scene.getMeshById in SceneLoader and afterwards apply different motions or color changes on button clicks.

However, with this approach, I have to have code for every single 3d model and new models cannot be created dynamically by users. Or if I allowed them to write the code for their models, I’d be forced to call eval() on their codes and endanger my website.

Is there a way to let user upload their glb model, then open nme where they could define, which meshes will be used and also apply changes to them?

Example parts of code, that I’d like to substitute with NME, instead of hardcode.

BABYLON.SceneLoader.Append(path, "tom1a.glb", scene, function (scene) {
    tom1a_front_top_black = scene.getMeshByID("front_top_black");
    let materialBlack = new BABYLON.StandardMaterial(scene);
    materialBlack.diffuseColor = new BABYLON.Color3(0.25, 0.25, 0.25);
    tom1a_front_top_black.material = materialBlack;
}

BABYLON.SceneLoader.Append(path, "tom1a.glb", scene, function (scene) {
    tom1a_fan = scene.getMeshByID("fan");
    tom1a_inside_bulb = scene.getMeshByID("inside_led_yellow");
    tom1a_inside_led = scene.getMeshByID("inside_yellow_bulb_bottom");

    tom1a_fan.rotation = new BABYLON.Vector3(0, 0, 0);
}

engine.runRenderLoop(function () {
    if (sceneToRender) {
        sceneToRender.registerBeforeRender(function () {

            if (range <= 0) {
                tom1a_fan.rotation.y = 0;
            } else {
                tom1a_fan.rotation.y += ((range / 360) * (Math.PI / 180));
            }

            if (bulb_intensity != null) {
                tom1a_inside_bulb.material.diffuseColor = new BABYLON.Color3(bulb_intensity / 100, bulb_intensity / 100, 0);
            }
        });
        sceneToRender.render();
    }
});

I’m reading the documentation, but there is so much to read. If this is mentioned somewhere and I just haven’t noticed, I’d be grateful if you pointed me to the parts I should read to better understand how to solve my problem.

Thank you.

2

There’s no need to execute code to open an arbitrary file, you can just use a HTML file element to let user choose files and pass the selected files to Babylon to load :slight_smile: File Input Example | Babylon.js Playground (babylonjs.com)

You can expand upon this with the NME, for example, by creating a node material for the loaded mesh, then using the Babylon Inspector to select this material, then you can open NME by clicking on the pen icon right by the material: File Input Example | Babylon.js Playground (babylonjs.com)

Then you can expand even further by adding another input to allow users to select which child meshes are assigned to the Node Material, etc… Basically, inputs are your friend here :slight_smile:

1 Like