在ThreeJS中使用PNG实现透明贴图效果

浏览数：27 / 时间：2015年06月09日

ThreeJS是一个基于WebGL的开源库，使用起来十分方便。不过由于是开源，所以相关文档相当稀少，本人把在学习过程中遇到的一些问题及解决方法整理成一个专栏，希望对大家可以有所帮助！

在ThreeJS中如果直接把PNG贴图赋给材质，是无法在场景中正常显示的，效果如下图所示：

技术分享

贴图是自己随便找的PNG图片，所以效果比较那个，大家不要介意。

现在说一下解决方法，就是在材质中设置透明属性为true，代码如下：

child.material.transparent = true;

正确效果如下：

技术分享

下面是完整的加载模型的代码：

//加载带贴图纹理的模型
    function LoadModelWithTexture()
    {

        //加载纹理
        var texture = new THREE.Texture();

        //加载图片
        var imgLoader = new THREE.ImageLoader(_manager);
        imgLoader.load(‘Model/ModelTest/map/bhtc_dql_cgd_002.png‘,function(img)
        {
            //将图片值赋于纹理
            texture.image = img;
            texture.needsUpdate = true;
        });

        //加载模型
        var _loader = new THREE.OBJLoader();
        _loader.load(‘Model/male02.obj‘,function(obj)
        {
            obj.traverse(function(child)
            {

                if (child instanceof THREE.Mesh)
                {
                    //将贴图赋于材质
                    child.material.map = texture;
                    //重点，没有该句会导致PNG无法正确显示透明效果
                    child.material.transparent = true;
                }
            });
            obj.position.x = -_modelDistance;
            _scene.add(obj);
        },onProgress,onError);
    }

　　完工。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

在ThreeJS中使用PNG实现透明贴图效果