在ThreeJS中使用PNG實現透明貼圖效果

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);
    }

　　完工。