将Alpha通道分配给OBJ / MTL模型网格

Question

在three.js中加载模型，其中有一些网格纹理具有alpha通道。但是，没有alpha应用于网格的那些部分。

这完全在Three.js R67

中

这是我的渲染设置。

renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
});

这是模型加载代码。

loader.load( 'chris/Chris_RE6.obj', 'chris/Chris_RE6.mtl', function ( object ) {
    mesh = object;
    mesh.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ) {

            // child.material.map = texture;
            child.castShadow = true;

        }

    } );
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add( mesh );

    animate(new Date().getTime());


    var myElement = document.querySelector(".loading");
    myElement.style.display = "none";

} );

我想我可能需要遍历模型并手动分配alphas吗？但这听起来很费劲！想象一下，如果我有多个透明胶片的高多边形模型？我如何推断出网格上需要透明的网格？但我甚至不确定这条思路是否正确。

Answer 1

我想我修好了。虽然我没有解决方案是100％。也许我会以错误的方式解决这个问题。

我知道头发必须在加载的网格中的某个地方，并且必须以某种方式输入。当我记录它时，我发现它，网格被命名为

名称：“head_group_151”

我认为如果头发被贴上了，它可能需要一个MeshPhongMaterial网格。因此，在我对模型的遍历中，我将透明度应用于具有该材质的所有部分。这修复了模型的显示。但我不认为它100％有效。

无论如何，这是现在更新的代码。

var loader = new THREE.OBJMTLLoader();
loader.load( 'chris/Chris_RE6.obj', 'chris/Chris_RE6.mtl', function ( object ) {
    mesh = object;
    mesh.traverse( function ( child ) {

           if ( child.material instanceof THREE.MeshPhongMaterial ) {

            child.material.transparent = true;

        }

        if ( child instanceof THREE.Mesh ) {

            child.castShadow = true;
            child.receiveShadow = true;

        }

    } );
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add( mesh );

    animate(new Date().getTime());


    var myElement = document.querySelector(".loading");
    myElement.style.display = "none";

} );