title: How to load texture with transparent background and make it movable?
body: <p><a href="https://i.stack.imgur.com/rE5dK.png" rel="nofollow noreferrer">smile on shirt has black background</a></p>
  <p><a href="https://i.stack.imgur.com/Dcvdw.png" rel="nofollow noreferrer">smile with transparent true</a></p>
  <p>GOAL: I would like users to be able to add images/colors with buttons</p>
  <p>PROBLEM: but the png image texture(smiley face) loaded with textureLoader() has black background and lines crossing the image. :frowning:</p>
  <p>MINOR PROBLEM:</p>
  <p>(1) Are there any ways to match the background color of the image and the obj/gltf(shirt) that I load?</p>
  <p>Here are my codes.</p>
  <pre><code>const colorSelection = {
    &quot;pink&quot;: &quot;#ff2d55&quot;,
    &quot;purple&quot;: &quot;#5856d6&quot;,
    &quot;blue&quot;: &quot;#007aff&quot;,
    &quot;orange&quot;: &quot;#ff9500&quot;,
  }
  
  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(&quot;container&quot;);
  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(&quot;assets/smile2.png&quot;);
  const newMat = new THREE.MeshPhongMaterial({ map: texture });
  
  myCanvas.appendChild( renderer.domElement );
  
  renderer.setSize( 800, 800 );
  renderer.setClearColor (&quot;darkgrey&quot;, 1);
  
  camera.position.set(200,300,200);
  controls.addEventListener(&quot;change&quot;, 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(&quot;assets/standard-t-shirt/source/tshirt.obj&quot;, function(obj) {
      
      obj.scale.set(0.4,0.4,0.4)
      obj.position.set(0,-500,0)
      
      obj.traverse((child) =&gt; {
        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(&quot;button&quot;).forEach(colorBtn =&gt; colorBtn.addEventListener(&quot;click&quot;, function () {
    
    console.log(this.id)
    const userColor = this.id;
    changeTextureColor(userColor);
    
  }))
  </code></pre>
  <p>Thanks so much for reading!</p>