title: How to add editable text and images to threejs
body: <p>So i'm trying to add new images and text as texture of 3d object using fabric js to my 3d configurator im using this code as codebase <a href="https://github.com/devramkumardnagarajan/3d-Tshirt-design" rel="nofollow noreferrer">https://github.com/devramkumardnagarajan/3d-Tshirt-design</a> and this code for the fabric js <a href="https://codepen.io/ricardcreagia/pen/EdEGod" rel="nofollow noreferrer">https://codepen.io/ricardcreagia/pen/EdEGod</a>, here's what i did</p>
  <p><code>var texture = new THREE.Texture(document.getElementById(&quot;canvas&quot;));</code></p>
  <p>here's how i load the svg</p>
  <pre><code>function set_materials(response) {
  
      var baseSvg = document.getElementById(&quot;svgContainer&quot;).querySelector(&quot;svg&quot;);
      var baseSvgData = (new XMLSerializer()).serializeToString(baseSvg);
  
      $('#svgPathContainer').empty();
      $('#svgTextContainer').empty();
      $('#svgPathContainer').append(baseSvgData).html();
      $('#svgTextContainer').append(baseSvgData).html();
      var texts = $('#svgPathContainer text');
      for (var i = 0; i &lt; texts.length; i++) {
          $(texts[i]).remove();
      }
      var paths = $('#svgTextContainer path');
      for (var i = 0; i &lt; paths.length; i++) {
          $(paths[i]).remove();
      }
      var svg = document.getElementById(&quot;svgPathContainer&quot;).querySelector(&quot;svg&quot;);
      var svgData = (new XMLSerializer()).serializeToString(svg);
      canvas.width = $(svg).width();
      canvas.height = $(svg).height();
      var ctx = canvas.getContext(&quot;2d&quot;);
      var img = document.createElement(&quot;img&quot;);
      var material;
      img.setAttribute(&quot;src&quot;, &quot;data:image/svg+xml;base64,&quot; + window.btoa(unescape(encodeURIComponent(svgData))));
  
      img.onload = function () {
          ctx.drawImage(img, 0, 0);
          var oImg = document.createElement(&quot;img&quot;);
          oImg.width = &quot;100px&quot;;
          oImg.height = &quot;100px&quot;;
          oImg.setAttribute(&quot;src&quot;, 'assets/' + gender + '/cat' + category + '/texture.png');
          oImg.onload = function () {
              ctx.globalAlpha = 0.4;
              ctx.scale(0.3, 0.3);
              var pattern = ctx.createPattern(oImg, 'repeat');
              ctx.fillStyle = pattern;
              ctx.fillRect(0, 0, canvas.width * 3.33, canvas.height * 3.33);
              ctx.globalAlpha = 1;
              ctx.scale(3.33, 3.33);
              var svgText = document.getElementById(&quot;svgTextContainer&quot;).querySelector(&quot;svg&quot;);
              var svgTextData = (new XMLSerializer()).serializeToString(svgText);
              var imgT = document.createElement(&quot;img&quot;);
              imgT.setAttribute(&quot;src&quot;, &quot;data:image/svg+xml;base64,&quot; + window.btoa(unescape(encodeURIComponent(svgTextData))));
              imgT.onload = function () {
                  ctx.drawImage(imgT, 0, 0);
                  texture.needsUpdate = true;
                  map = texture;
                  textureMaterial = new THREE.MeshPhongMaterial({ map: map });
                  load_materials();
                  load_styles();
                  response(true);
              }
          }
      };
  }
  </code></pre>
  <p>i map the <code>texture</code> to <code>textureMaterial</code> and here's what i got</p>
  <p><a href="https://i.stack.imgur.com/oNS43.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oNS43.png" alt="enter image description here" /></a></p>
  <p>it doesn't map the UV properly, anyone have any idea how to fix it?</p>