TypeError:无法在“WebGLRenderingContext”上执行“texImage2D”:重载解析失败

Posted

技术标签:

【中文标题】TypeError:无法在“WebGLRenderingContext”上执行“texImage2D”:重载解析失败【英文标题】:TypeError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Overload resolution failed 【发布时间】:2021-11-14 19:50:12 【问题描述】:

我正在尝试使用 fabricjs 作为三个 js 模型的画布纹理创建一个 3d 定制器。我像这样加载 obj 文件

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

这是我的织物 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);
);

而我的 3d 模型就是这样全黑的

有人知道如何解决这个问题吗?我想将我的 fabricjs 画布包装到我的 3d 模型中

【问题讨论】:

【参考方案1】:

我找到了几个解决方案后,我发现这个问题与这个帖子有相同的解决方案how to load fabricjs as texture for obj using threejs

问题是我使用fabricjs canvas作为THREE.Texture的参数,它只支持图像,所以我将它改为canvas标签,阅读上面的帖子希望它对某人有所帮助。

【讨论】:

以上是关于TypeError:无法在“WebGLRenderingContext”上执行“texImage2D”:重载解析失败的主要内容,如果未能解决你的问题,请参考以下文章

TypeError:无法读取属性“集合”[重复]

Mongoose TypeError:TypeError:无法使用“in”运算符在未定义中搜索“pluralization”

TypeError:无法在反应中读取 null 的属性“名称”

TypeError:无法在reactjs登录页面中获取

TypeError:无法在 gitlab 中读取未定义的属性(读取“读取”)

UnhandledPromiseRejectionWarning:TypeError:无法在数字“1000”上创建属性“回复”