Search code examples
javascriptthree.jsfabricjs

TypeError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Overload resolution failed

I'm trying to create a 3d customizer using fabricjs as canvas texture for three js model. I load obj file like this

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

and here's my fabric 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);
});

and my 3d model is all black like this

enter image description here

anyone have any idea how to fix this? i want to wrap my fabricjs canvas to my 3d model

Solution

  • After i find several solution, i found that this problem is has the same solution to this post how to load fabricjs as texture for obj using threejs

    the problem was i use fabricjs canvas as argument for THREE.Texture which only support image, so i change it to canvas tag instead, read above post hope it helps someone.