Three.js 如何加载具有透明背景的纹理并使其可移动？

目标：我希望用户能够使用按钮添加图像/颜色

问题：但是加载了textureLoader（）的png图像纹理（笑脸）具有黑色背景和横穿图像的线条：皱眉：

小问题：

（1） 有什么方法可以匹配图像的背景色和我加载的obj/gltf（衬衫）吗

这是我的密码

const colorSelection = {
  "pink": "#ff2d55",
  "purple": "#5856d6",
  "blue": "#007aff",
  "orange": "#ff9500",
}

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({ antialias: true });
const loader = new THREE.OBJLoader();
const myCanvas = document.getElementById("container");
const controls = new THREE.OrbitControls(camera, renderer.domElement);
const axisHelper = new THREE.AxisHelper(5);
const hlight = new THREE.AmbientLight (0x404040);
const directionalLight = new THREE.DirectionalLight(0xffffff,0.4);
const geometry = new THREE.SphereGeometry(50,50,50);
const texture = new THREE.TextureLoader().load("assets/smile2.png");
const newMat = new THREE.MeshPhongMaterial({ map: texture });

myCanvas.appendChild( renderer.domElement );

renderer.setSize( 800, 800 );
renderer.setClearColor ("darkgrey", 1);

camera.position.set(200,300,200);
controls.addEventListener("change", animate);

function animate() {
  requestAnimationFrame( animate );
  renderer.render( scene, camera );
};

// SCENES and LIGHTING

scene.add(axisHelper);
scene.add(hlight);
scene.add(directionalLight);

directionalLight.position.set(0,1155,325);
directionalLight.castShadow = true;


function changeTextureColor(color) {
  loader.load("assets/standard-t-shirt/source/tshirt.obj", function(obj) {
    
    obj.scale.set(0.4,0.4,0.4)
    obj.position.set(0,-500,0)
    
    obj.traverse((child) => {
      if (child instanceof  THREE.Mesh) {
        child.material.emissive = new THREE.Color(colorSelection[color])
        console.log(child.material)
      }
    })
    console.log(obj.children)
    obj.children[0].material = newMat
    
    scene.add(obj)
  })
}

document.querySelectorAll("button").forEach(colorBtn => colorBtn.addEventListener("click", function () {
  
  console.log(this.id)
  const userColor = this.id;
  changeTextureColor(userColor);
  
}))

---

非常感谢你的阅读

创建材质时，您需要

透明：true

设置，如下所示：

const newMat = new THREE.MeshPhongMaterial({ map: texture, transparent: true });

---

谢谢你的评论！我只是尝试了你告诉我的，但是整个材质变透明了，我应用的衬衫部分也变透明了：（我刚刚添加了带有新症状的图像。