使用Three.js在加载的模型上，通过材质名称为材质添加边框。

Question

能否像图片中所示给材料添加边框？

我可以通过以下代码设置材料的颜色

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

这里的对象是我加载的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');

     }

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

- Jothi Kannan

---

这可能会有所帮助 http://jeromeetienne.github.io/threex.geometricglow/examples/geometricglowmesh.html - Shiva

请尝试访问此链接：https://dev59.com/g2Mm5IYBdhLWcg3wRdXe#21863009 - 2pha

嗨@Shiva，请检查更新代码，你能帮我吗？ - Jothi Kannan

@JothiKannan：你能否制作一个JSfiddle来展示你的完整代码？如果你在加载模型JS文件时遇到任何问题，只需将它们上传到Dropbox的“公共文件”文件夹，并通过AJAX调用它们，因为我也不完全确定答案，需要对代码进行测试。 - Shiva

嗨@JothiKannan：我尝试了，但是在dropbox链接上得到了404错误，请检查一下。 - Shiva

Answer 1

我认为这就是你要的内容。它是通过以下方式实现的：

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

您可以在此处查看演示： https://stemkoski.github.io/Three.js/Outline.html

演示的源代码：https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Outline.html

- Frazer Kirkman

Answer 2

我尽力去实现它，但不幸的是我无法达成目标，所以我决定使用线框选项来突出材料：

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

现在已经为材料material9695增加了线框，以便我可以确定当前选择的是材料material9695。

这不是我所期望的确切答案，但在经过一些艰难的努力后，现在足够了。

- Jothi Kannan