How to load texture with transparent background and make it movable?

Questions
1

Screen Shot 2021-05-11 at 9.43.42 AM
Screen Shot 2021-05-11 at 9.43.42 AM2319×1121 513 KB

GOAL: I would like users to be able to add images/colors with buttons

PROBLEM: but the png image texture(smiley face) loaded with textureLoader() has black background and lines crossing the image. :frowning:

MINOR PROBLEM:

(1) Are there any ways to match the background color of the image and the obj/gltf(shirt) that I load?

Here are my codes.

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

Thanks so much for reading!