Estoy tratando de crear un personalizador 3d usando fabricjs como textura de lienzo para el modelo tres js. Cargo un archivo obj como este

 function loadObj() { canvasTexture.anisotropy = renderer.capabilities.getMaxAnisotropy(); textureMaterial = new THREE.MeshPhongMaterial({ map: canvasTexture }); texture.needsUpdate = true; 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 = textureMaterial; }; }); console.log(object.children[0].material) object.children[0].material = textureMaterial; render(); 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); }); }

y aquí está mi tela js

 var canvas = new fabric.Canvas("canvas"); canvas.backgroundColor = "#FFBE9F"; var text = new fabric.IText('Three.js\n+\nFaBric.js', { fontSize: 100, textAlign: 'center', fontWeight: 'bold', left: 500, top: 500, originX: 'center', originY: 'center', selectable: true // make this object selectable }); fabric.loadSVGFromURL('assets/men/cat1/prod1/pattern.svg', function (objects, options) { var svgData = fabric.util.groupSVGElements(objects, { selectable: false,crossOrigin: 'anonymous' }); svgData.top = 420; svgData.left = 70; canvas.add(svgData); canvas.sendToBack(svgData); }); canvas.add(text); var texture = new THREE.Texture(document.getElementById("canvas")); fabric.Image.fromURL('assets/men/cat1/texture.png', function (myImg) { var img1 = myImg.set({ left: 0, top: 0, selectable: false,crossOrigin: 'anonymous' }); canvas.add(img1); canvas.sendToBack(img1); });

y mi modelo 3d es todo negro así

¿alguien tiene alguna idea de cómo solucionar esto? quiero envolver mi lienzo fabricjs a mi modelo 3d