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.
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 , I want this glow effect to be the border of this material, is it possible.
source to share
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
source to share
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
source to share