how to load fabricjs as texture for obj using threejs

Question

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.

function set_materials(response) {

    var baseSvg = document.getElementById("svgContainer").querySelector("svg");
    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 < texts.length; i++) {
        $(texts[i]).remove();
    }
    var paths = $('#svgTextContainer path');
    for (var i = 0; i < paths.length; i++) {
        $(paths[i]).remove();
    }
    var svg = document.getElementById("svgPathContainer").querySelector("svg");
    var svgData = (new XMLSerializer()).serializeToString(svg);
    canvas.width = $(svg).width();
    canvas.height = $(svg).height();
    var ctx = canvas.getContext("2d");
    var img = document.createElement("img");
    var material;
    img.setAttribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgData))));

    img.onload = function () {
        ctx.drawImage(img, 0, 0);
        var oImg = document.createElement("img");
        oImg.width = "100px";
        oImg.height = "100px";
        oImg.setAttribute("src", '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("svgTextContainer").querySelector("svg");
            var svgTextData = (new XMLSerializer()).serializeToString(svgText);
            var imgT = document.createElement("img");
            imgT.setAttribute("src", "data:image/svg+xml;base64," + 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);
            }
        }
    };
}

here i set the texture using svgContainer which is contain an svg file. i've tried using this code to map the fabricjs canvas as texture

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

but my model still looks like this. i've checked that node.material.map and canvasTexture have the same value. anyone have any idea why?

Answer 1

This is usually due to a CORS error. If you fix the CORS issue, you should be good.

I've also seen it occur where the "canvas" in new Texture(canvas) was actually a texture, which creates an invalid texture due to the nesting.

Answer 2

i found the solution. so the problem was i created a texture using fabricjs canvas as argument like this

var texture = new THREE.Texture(canvas);

that canvas was fabricjs canvas, but THREE.Texture only support image

https://threejs.org/docs/#api/en/textures/Texture    
Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )

So i cange the argument using canvas tag like this

var texture = new THREE.Texture(document.getElementById("canvas"));

that way, canvas tag was map to the 3d model. sorry if i dont deliver the best explanation but hope it helps someone