Need help with this script, for making meshes clickable

Questions
1

I was trying to learn from this guy who created s scene with clickable meshes, but I dont quite understand the code he typed, he used var nodes, I saw others online use var mesh = scene.meshes, why did he use Nodes?

BABYLON.SceneLoader.Append("./asset/",“1.obj”,scene,function(scene){

var nodes = scene.getNodes();
advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI(“UI”);

for (i = 0;i <= nodes.length; i++) {
console.log('nodes are ’ + nodes[i].id);
var mesh1 = scene.getMeshByName(nodes[i].id);
mesh1.actionManager = new BABYLON.ActionManger(scene);

if (nodes[i].id.toString().includes(‘Tree’) || nodes[i].id.toString().includes(‘tree’) || nodes[i].id.toString().includes(‘baseupper’)) {
mesh1.material.specularPower = 100000;
}

makeOverout(mesh1,scene,advancedTexture);

Also how do I make mesh highlight just the outer and hover over instead of reducing visibility?

var makeOverOut = function(mesh, scene, advancedTexture){

                mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh, 'visibility', 1,300));

                mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh, 'visibility', .2,300));
2

No idea why he used nodes, as he will get the lights, cameras, … in the for loop. I would think it’s a mistake.

As for highlighting a mesh, you could use the outline renderer by setting mesh.renderOutline= true when hoovered and mesh.renderOutline= false when out.

3

Thanks Evgeni! Does the export babylon feature in sandbox save the textures in babylon file as well?

4

Yes, the glb / babylon export does embed all the textures in the file.

1 Like
5

What does this line of code actually mean? I am scratching my head on this one
for (var i=0;i<scene.meshes.length;i++)

6

and console.log as well

7

Have I done something wrong here?
var makeOverOut = function(mesh, scene, advancedTexture){

                mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh, 'visibility', 1,300));

                mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh, 'visibility', .2,300));

(few lines apart, then sceneloader)

BABYLON.SceneLoader.ImportMesh("","",“TankChallenger.babylon”,scene,function(scene){

                    advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreatedFullscreenUI("UI");

                    

                    for (var i=0;i<scene.meshes.length;i++) {

                        var mesh = scene.getMeshByName[i];

                        mesh.isPickable = true;

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

                        

                        makeOverOut(mesh, scene, advancedTexture);

                    }

                

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

                });

                return scene;
8

Please make a repro in https://playground.babylonjs.com/, it will be easier to help.

9

I couldn’t store my model anywhere to make it work playground, I have tried dropbox, github, google drive, file size about 150mb.

10

Have you tried with a lighter asset? I don’t think the asset itself does matter, so using any one should do it.

11

is it a way to show my model in quads instead of triangles for wireframe?

12

Maybe you can try the shader from @Pryme8:

13

Is this something that I can edit in node editor?

14

It is using a custom attribute which is not supported yet in the nme.

However, you can use the color attribute instead as it is not used in the shader.

So, yes, it is possible to create it with the nme.

15

is there an example I can have a look at? I would like to change the colour of the wireframe for different meshes

16

You have the doc of the nme here: How To use the Node Material - Babylon.js Documentation

If you want to only change the colors, look for cellC and wireC in the code.

17

do you mean changing the number below like new BABYLON.Color3. (R,G,B)?

            vec3 cellC = vec3(0.0, 0.5, 0.7);
            float cellA = 0.2;
            vec3 wireC = vec3(0.6, 0.6, 1.0);
18

I got the colour, thanks. what is cellA for?

19

I don’t know, I didn’t write the code: just change the value and see how it affects the rendering :slight_smile:

It seems to impact the transparency of the effect.

Maybe @Pryme8 will be able to help as he actually wrote the shaders.

20

there is a weird thing I noticed, the model is flipped horizontally using this shader? any idea how to fix this?