Three.js add border to material by motherboard name on loaded models

you can add a border around the material as shown in the picture,

I can set the color of the material by following the 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 suppose there should be a way to draw the border, is there any option in the three .js. enter image description here

As per @ shiva comment I tried it with the following code to paint 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 output looks like in the second image enter image description here, I want this glow effect to be the border of this material, is it possible.

+3


source to share


2 answers


I tried my level to achieve this, but unfortunately I cannot get it, so I decided to do it with the wireframe option to highlight the material.

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


  //console.log(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 determine that the material is currently selectedmaterial9695



This is not the exact answer I was expecting, but enough for now, after several difficult hours enter image description here

enter image description here

+7


source


I think this is what you were. This is accomplished with:

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

      



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

+3


source







All Articles