背景

遇到过好几次自创canvas做纹理贴图或者用png做纹理贴图时，空的地方加载到场景效果就是黑色，有点难看，于是出现需求能不能透明或者白色。

透明

变透明很简单,transparent设成true就完事了。

 let material = new THREE.MeshBasicMaterial({ transparent: true, map: texture, side: THREE.DoubleSide });

白色

白色稍微复杂一点点，就是把缺失像素点的地方补齐，补成白色

         // 获取纹理画布
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.width = texture.image.width;
        canvas.height = texture.image.height;
        context.drawImage(texture.image, 0, 0);

        // 获取纹理像素数据
        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        // 将透明部分修改为白色
        for (let i = 0; i < data.length; i += 4) {
            if (data[i + 3] === 0) { // 如果 alpha 通道为 0（即透明部分）
                data[i] = 255; // 将红色通道设置为 255（白色）
                data[i + 1] = 255; // 将绿色通道设置为 255（白色）
                data[i + 2] = 255; // 将蓝色通道设置为 255（白色）
                data[i + 3] = 255; // 将 alpha 通道设置为 255（不透明）
            }
        }

        // 更新纹理
        context.putImageData(imageData, 0, 0);
        texture.image = canvas;
        texture.needsUpdate = true;