three.js add border to material by materiel name on loaded models

Question

is it possible to add border around a material, as attached in the image,

i can set the material color by following code

object.traverse( function ( child )
    {
        if ( child instanceof THREE.Mesh )
            child.material.color.setRGB (1, 0, 0);
    });

where object is my loaded 3d model, so am assume there should be a way to draw the border, is there any option in three.js. enter image description here

As per the @shiva's comment i have tried it with the following code to draw the glow effect

if(childObject.material.name=="material4046")
     {
      mesh  = new THREE.Mesh( globalGeomtry, material );
    // mesh.visible = false
    scene.add( mesh );

    console.log(mesh);

    // create a glowMesh
    var glowMesh    = new THREEx.GeometricGlowMesh(mesh);
    mesh.add(glowMesh.object3d);

            // example of customization of the default glowMesh
    var insideUniforms  = glowMesh.insideMesh.material.uniforms;
    insideUniforms.coeficient.value = 2;
    insideUniforms.power.value      = 1.4;
    insideUniforms.glowColor.value.set('red');

    var outsideUniforms = glowMesh.outsideMesh.material.uniforms;
    outsideUniforms.coeficient.value    = 2;
    outsideUniforms.power.value     = 1.4;

    outsideUniforms.glowColor.value.set('red');

     }

now the ouput is looking as like in the second image enter image description here , i want this glow effect as the border around that material, is it is possible

This might help http://jeromeetienne.github.io/threex.geometricglow/examples/geometricglowmesh.html — Shiva, Aug 05 '14 at 06:20
Try this http://stackoverflow.com/questions/17739760/complex-shape-character-outline/21863009#21863009 — 2pha, Aug 05 '14 at 07:13
Hi @Shiva am getting some undefined error while use those functions — Jothi Kannan, Aug 05 '14 at 08:16
@JothiKannan: Can you make a JSfiddle of your complete code, if you have any trouble loading the model JS files, just upload them on Dropbox's `public files` folder and make an AJAX call to them,because I am too not completely sure about the answer and will have to play with the code. — Shiva, Aug 06 '14 at 05:48
Hi @Shiva you can download my 3d model from here https://www.dropbox.com/sm/create/fw43_x.zip — Jothi Kannan, Aug 07 '14 at 07:39
Hi @JothiKannan : I tried but I am getting a 404 on the dropbox link, kindly check. — Shiva, Aug 07 '14 at 07:41
Hi @Shiva https://www.dropbox.com/s/4ra9j7y5da9mu7a/fw43_x.zip , check the link here — Jothi Kannan, Aug 07 '14 at 08:05
@JothiKannan: Hi, I did tried, but sadly can't get the desired result,and I too am curious to find the answer so am putting a bounty on the question. — Shiva, Aug 08 '14 at 08:17
Thank you very much @Shiva , am also trying my level best to achieve it — Jothi Kannan, Aug 08 '14 at 08:33
Hi @Shiva i tried lot and can't get exact result, so i used wireframe option to highlight the selected material by it's name and it is working fine — Jothi Kannan, Aug 12 '14 at 13:40
@JothiKannan: Thats great...you can post it as answer, for future reference. — Shiva, Aug 12 '14 at 15:55
@Shiva i have posted answer, kindly check it and let me know your opinion — Jothi Kannan, Aug 13 '14 at 04:42

score 11 · Answer 1 · edited Jan 02 '23 at 10:58

11

I think this is what you were after. It is achieved with:

new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.BackSide } );

You can see a demo here: https://stemkoski.github.io/Three.js/Outline.html

Source code of the demo: https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Outline.html

edited Jan 02 '23 at 10:58

Daniel Reina

5,764
1
37
50

answered Nov 25 '16 at 01:22

Frazer Kirkman

1,003
1
14
23

score 9 · Accepted Answer · edited Jan 06 '22 at 23:22

I tried my level best to achieve it, but unfortunately I can't get it, so I decided to do it with the wireframe option to highlight the material:

if(childObject.material.name=="material9695")
{
    var mesh    = new THREE.Mesh( globalGeomtry, material );
    scene.add( mesh );
  
    var outlineMaterial1 = new THREE.MeshBasicMaterial( { color: 0xff0000,wireframe : true } );
    var outlineMesh1 = new THREE.Mesh( globalGeomtry, outlineMaterial1 );
  
    scene.add( outlineMesh1 );
}

Now the wireframe is added for the material material9695 so I can identify that the material material9695 is currently selected

This is not the exact answer I expected but it is enough right now after some hard hours enter image description here

enter image description here

three.js add border to material by materiel name on loaded models

2 Answers2

Linked