javascript - TypeError:无法在“WebGLRenderingContext”上执行“texImage2D”:重载解析失败
问题描述
我正在尝试使用 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 模型中
解决方案
在我找到了几个解决方案之后,我发现这个问题与这篇文章有相同的解决方案如何使用threejs将fabricjs加载为obj的纹理
问题是我使用fabricjs canvas作为THREE.Texture
仅支持图像的参数,所以我将其更改为canvas标签,阅读上面的帖子希望它对某人有所帮助。
推荐阅读
- json - 如何使用 XSLT 将 JSON 转换为 XML?
- php - 运行时 PHPUnit 的代码覆盖率
- javascript - 填充下拉点击它
- vba - 如何将AutoCAD表格块单元格提取到图像
- python - 找不到命令“python.execInTerminal-icon”
- r - R:随机切换矩阵中非对角线的符号
- excel - 如何对 Power Query 中的 N 列求和
- javascript - 将reducer从react redux转换为hook
- django - 寻找在 MacOs 中修改主机文件
- rabbitmq - 在 Spring AMQP 中处理 RabbitMQ DLQ 消息的最佳方法是什么