使用three.js将透明背景PNG贴到圆柱体时如何保留原始颜色

问题原因 #

• 你当前使用的MeshStandardMaterial属于PBR（基于物理的渲染）材质，这类材质的显示效果高度依赖场景光照，你的代码中将环境光的初始化代码完全注释，场景内没有任何光源，材质自然会显示为接近黑色的状态。
• 你没有为材质开启透明通道配置，透明PNG的背景也无法正确渲染。
• 如果你要自定义修改纹理颜色，只需要修改材质的color属性即可，纹理色彩会和该属性值做乘法混合。

修复方案 #

方案1：保留PBR材质，补充场景光照（适合需要立体光照效果的场景） #

首先取消环境光的注释，或直接添加如下光照代码：

// 全局环境光，白光全亮度，保证基础色彩显示正常
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
solo_scene.add(ambientLight);
// 可选添加方向光，提升立体效果
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(5, 5, 10);
solo_scene.add(directionalLight);

同时修改材质配置，开启透明支持，避免原有灰色叠加让图片偏暗：

const paintmaterial = new THREE.MeshStandardMaterial({
    color: 0xffffff, 
    map: texture,
    transparent: true // 适配透明PNG
});

方案2：无需光照，直接还原原图原始色彩（适合只要平面纹理效果的场景） #

直接将MeshStandardMaterial替换为不需要光照的MeshBasicMaterial即可，完全不受光照影响，直接原样显示纹理色彩：

const paintmaterial = new THREE.MeshBasicMaterial({
    map: texture,
    transparent: true, // 适配透明PNG
    side: THREE.DoubleSide, // 避免圆柱体侧面翻转后看不到纹理
    // 如需自定义颜色，直接添加color属性即可，例：color: 0xff0000 会把纹理染成红色
});

内容的提问来源于stack exchange，提问作者Glen Keybit