三.js透明模型纹理bug答案

【问题标题】：Three.js transparency model texture bug三.js透明模型纹理bug
【发布时间】：2016-06-08 04:12:50
【问题描述】：

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

所以，在 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 });

【问题讨论】：

您正在使用不透明的 jpg 纹理。将它们转换为 png 并仅使用 alphaTest。
我改了，没有结果 :(
@gaitat：这个模型使用 Alpha 贴图来处理透明度，所以它可以工作。在这种情况下它不起作用，因为各种其他代码错误。

标签： javascript three.js textures

【解决方案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);
});

要进一步减少透明伪影，请将树干设置为不透明。您的模型应该包含正确的材料设置，所以这是一种不好的做法。

编辑：在renderer 中设置alpha 和premultipliedAlpha 对于此问题不是必需的。

结果：

【讨论】：