title: how to load fabricjs as texture for obj using threejs
body: <p>i'm trying to add svg to fabricjs as texture for my 3d model using threejs, currently my 3d model is using svg as texture, it is working fine except if i map fabricjs as texture the svg will removed, so i think it's better to place the svg to the fabricjs canvas.</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.anisotropy = renderer.capabilities.getMaxAnisotropy();
                  map = texture;
                  textureMaterial = new THREE.MeshPhongMaterial({ map: map });
                  texture.needsUpdate = true;
                  load_materials();
                  load_styles();
                  response(true);
              }
          }
      };
  }
  </code></pre>
  <p>here i set the texture using <code>svgContainer</code> which is contain an svg file. i've tried using this code to map the fabricjs canvas as texture</p>
  <pre><code>function loadObj() {
      var loader = new THREE.OBJLoader2(manager);
      loader.load('assets/men/cat1/model1.obj', function (data) {
          if (object != null) {
              scene.remove(object);
          }
          object = null;
          object = data.detail.loaderRootNode;
          materials = [];
          object.traverse(function (child) {
              if (child.isMesh) {
                  child.material.map = canvasTexture;
              };
          });
          object.children[0].material.map = canvasTexture;
          var scale = height / 5;
          object.scale.set(scale, scale, scale);
          object.position.set(0, -scale * 1.25, 0);
          object.rotation.set(0, Math.PI / 2, 0);
          object.receiveShadow = true;
          object.castShadow = true;
          scene.add(object);
      });
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/KaY4V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KaY4V.png" alt="enter image description here" /></a></p>
  <p>but my model still looks like this. i've checked that <code>node.material.map</code> and <code>canvasTexture</code> have the same value. anyone have any idea why?</p>