三.js 通过加载模型上的 Material 名称为 Material 添加边框

Question

是否可以在 Material 周围添加边框，如图所示，

我可以通过以下代码设置 Material 颜色

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

其中 object 是我加载的 3d 模型，所以我假设应该有一种绘制边框的方法，three.js 中是否有任何选项。

根据@shiva 的评论，我尝试使用以下代码绘制发光效果

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

     }

现在输出看起来像第二张图片 ,
我想要这种发光效果作为该 Material 周围的边界，这可能吗

Answer 1

我尽我最大的努力来实现它，但不幸的是我无法得到它，所以我决定使用线框选项来突出显示 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 );


   }

现在为 Material 添加线框 material9695所以我可以识别 Material material9695当前被选中

这不是我预期的确切答案，但经过几个小时的努力，现在已经足够了