javascript – Three.js透明模型纹理bug

2019-08-24 07:43:08 阅读：163 来源： 互联网

我搜索了所有的互联网并尝试了很多方法,但没有结果..
如何删除纹理透明度错误？检查图像

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

解决方法:

您必须在材料上设置alphaTest.另外将leafes和branches设置为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.

结果：

标签：javascript,three-js,textures
来源： https://codeday.me/bug/20190824/1705908.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Three.js透明模型纹理bug