ThreeJS-透明材质和透明纹理（十二）

素材：

door.webp

 men_k.webp

关键代码：

//纹理加载器

    const textureLoader = new THREE.TextureLoader();

    //纹理加载器加载图片

    const docColorLoader = textureLoader.load('three/door.webp');

 const cubeMaterial = new THREE.MeshBasicMaterial({

        color: 0xffff00,

        transparent: true,

        // opacity: 1,

        map: docColorLoader,

        //alphaMap: menColorLoader

      });

效果图：

 

添加透明

关键代码：

 //纹理加载器

 const textureLoader = new THREE.TextureLoader();

 //纹理加载器加载图片

 const docColorLoader = textureLoader.load('three/door.webp');

 const menColorLoader = textureLoader.load('three/men_k.webp');

 const cubeMaterial = new THREE.MeshBasicMaterial({

        color: 0xffff00,

        transparent: true,

        // opacity: 1,

        map: docColorLoader,

        alphaMap: menColorLoader

      });

alphaMap：

效果图：

两面都渲染：

关键代码：

    const cubeMaterial = new THREE.MeshBasicMaterial({

        color: 0xffff00,

        transparent: true,

        // opacity: 1,

        map: docColorLoader,

        alphaMap: menColorLoader,

        side: THREE.DoubleSide

      });

 效果图：