Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

three.js

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 imageenter image description here, i want this glow effect as the border around that material, is it is possible

like image 729
Jothi Kannan Avatar asked Dec 05 '22 05:12

Jothi Kannan


1 Answers

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

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

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

like image 155
Frazer Kirkman Avatar answered Dec 15 '22 00:12

Frazer Kirkman