# Need help with this script, for making meshes clickable

**URL:** <https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987>\
**Category:** Questions\
**Created:** [September 7, 2020, 10:56pm UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987 "2020-09-07T22:56:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![vchia](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vchia](https://forum.babylonjs.com/u/vchia)\
**Post date:** [September 7, 2020, 10:56pm UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/1 "2020-09-07T22:56:55Z")

</div>

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));
```

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 8, 2020, 8:26am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/2 "2020-09-08T08:26:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![vchia](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vchia](https://forum.babylonjs.com/u/vchia)\
**Post date:** [September 8, 2020, 10:44am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/3 "2020-09-08T10:44:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 8, 2020, 11:14am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/4 "2020-09-08T11:14:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vchia](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vchia](https://forum.babylonjs.com/u/vchia)\
**Post date:** [September 9, 2020, 10:15pm UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/5 "2020-09-09T22:15:30Z")

</div>

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++)

---

<div class="post-metadata">

**Author:** ![vchia](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vchia](https://forum.babylonjs.com/u/vchia)\
**Post date:** [September 9, 2020, 10:17pm UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/6 "2020-09-09T22:17:50Z")

</div>

and console.log as well

---

<div class="post-metadata">

**Author:** ![vchia](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vchia](https://forum.babylonjs.com/u/vchia)\
**Post date:** [September 9, 2020, 11:09pm UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/7 "2020-09-09T23:09:51Z")

</div>

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;
```

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 10, 2020, 8:17am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/8 "2020-09-10T08:17:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vchia](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vchia](https://forum.babylonjs.com/u/vchia)\
**Post date:** [September 10, 2020, 8:31am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/9 "2020-09-10T08:31:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 10, 2020, 8:41am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/10 "2020-09-10T08:41:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vchia](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vchia](https://forum.babylonjs.com/u/vchia)\
**Post date:** [September 11, 2020, 6:39am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/11 "2020-09-11T06:39:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 11, 2020, 8:54am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/12 "2020-09-11T08:54:23Z")

</div>

Maybe you can try the shader from @Pryme8:

> [@Barycentric Generation?](https://forum.babylonjs.com/t/barycentric-genration/9994/5):
>
> [https://www.babylonjs-playground.com/#G3GZA1#162](https://www.babylonjs-playground.com/#G3GZA1#162) Yeah it worked for sure.

---

<div class="post-metadata">

**Author:** ![vchia](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vchia](https://forum.babylonjs.com/u/vchia)\
**Post date:** [September 13, 2020, 9:12am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/13 "2020-09-13T09:12:10Z")

</div>

Is this something that I can edit in node editor?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 13, 2020, 10:03am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/14 "2020-09-13T10:03:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![vchia](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vchia](https://forum.babylonjs.com/u/vchia)\
**Post date:** [September 13, 2020, 10:14am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/15 "2020-09-13T10:14:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 13, 2020, 10:21am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/16 "2020-09-13T10:21:54Z")

</div>

You have the doc of the nme here: [How To use the Node Material - Babylon.js Documentation](https://doc.babylonjs.com/how_to/node_material)

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

---

<div class="post-metadata">

**Author:** ![vchia](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vchia](https://forum.babylonjs.com/u/vchia)\
**Post date:** [September 13, 2020, 10:28am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/17 "2020-09-13T10:28:06Z")

</div>

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);
```

---

<div class="post-metadata">

**Author:** ![vchia](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vchia](https://forum.babylonjs.com/u/vchia)\
**Post date:** [September 13, 2020, 10:36am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/18 "2020-09-13T10:36:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 13, 2020, 10:48am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/19 "2020-09-13T10:48:15Z")

</div>

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

It seems to impact the transparency of the effect.

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

---

<div class="post-metadata">

**Author:** ![vchia](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vchia](https://forum.babylonjs.com/u/vchia)\
**Post date:** [September 13, 2020, 10:58am UTC](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987/20 "2020-09-13T10:58:17Z")

</div>

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

[Next page](https://forum.babylonjs.com/t/need-help-with-this-script-for-making-meshes-clickable/13987.md?page=2)