Three.js透明模型纹理错误

Question

我在整个互联网上搜索并尝试了很多方法，但是没有结果...如何消除纹理透明度错误？请查看图片。

所以，在3dsmax中模型看起来还不错。我使用Python脚本将其从.obj格式转换为.js格式，以便.png文件具有透明度（.obj无法实现透明度）。

如何解决我的问题？谢谢。

var loader = new THREE.JSONLoader();
loader.load('tree_model.js', function(geometry, materials) {
    var material = new THREE.MeshFaceMaterial(materials);
    var object = new THREE.Mesh(geometry, material);
    object.traverse( function ( child ) {
            if ( child.material instanceof THREE.MeshPhongMaterial ) {

                // this code is unattainable, but anyway without if (..) it does not work

                child.material.alphaTest = 0.5;
                child.material.depthWrite = false;
                child.material.depthTest = false;
                child.material.side = THREE.BackSide;
                child.material.transparent = true;
            }
        });
        scene.add(object);
    });
});

和渲染器：

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

- sirjay

---

你正在使用不支持透明度的jpg纹理。请将它们转换为png格式，并仅使用alphaTest。 - gaitat

我修改了，但没有结果 :( - sirjay

@gaitat：这个模型使用Alpha贴图来处理透明度，所以它应该可以工作。但在这种情况下，它不起作用是因为其他各种代码错误。 - Falk Thiele

Answer 1

您需要在材质上设置alphaTest。此外，将叶子和树枝设置为THREE.DoubleSide可以确保当从另一侧查看时它们不会消失。

您发布的代码中包含多个错误，请使用以下代码替换：

var loader = new THREE.JSONLoader();
loader.load('model/Elka.js', function(geometry, materials) {

    for( var i = 0; i < materials.length; i ++ ) {
        var material = materials[ i ];
        material.alphaTest = 0.5;
        material.side = THREE.DoubleSide;
        // not-so-good practice
        if ( material.name === "NorwaySpruceBark" ) {
            material.transparent = false;
        }
    }

    var material = new THREE.MeshFaceMaterial(materials);
    var object = new THREE.Mesh(geometry, material);
    scene.add(object);
});

为了进一步减少透明度伪影，将主干设置为不透明。您的模型应该包含正确的材质设置，因此这种做法有点不好。

编辑：对于这个问题，在渲染器中设置alpha和premultipliedAlpha是不必要的。

结果：

- Falk Thiele