javascript - 如何使用threejs将fabricjs加载为obj的纹理
问题描述
我正在尝试使用threejs将svg添加到fabricjs作为我的3d模型的纹理,目前我的3d模型使用svg作为纹理,它工作正常,除非我将fabricjs映射为纹理,svg将被删除,所以我认为最好将 svg 放到 fabricjs 画布上。
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);
}
}
};
}
在这里,我设置了svgContainer
包含 svg 文件的纹理。我尝试使用此代码将fabricjs画布映射为纹理
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);
});
}
但我的模型仍然是这个样子。我已经检查过node.material.map
并且canvasTexture
具有相同的值。有人知道为什么吗?
解决方案
我找到了解决方案。所以问题是我使用fabricjs画布作为这样的参数创建了一个纹理
var texture = new THREE.Texture(canvas);
那canvas
是fabricjs画布,但THREE.Texture
只支持image
https://threejs.org/docs/#api/en/textures/Texture
Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )
所以我使用这样的画布标签来改变论点
var texture = new THREE.Texture(document.getElementById("canvas"));
这样,画布标签就映射到了 3d 模型。抱歉,如果我没有提供最好的解释,但希望它可以帮助某人
推荐阅读
- angular - 如何在 ionic 3 中的模板驱动表单中添加验证?
- kotlin - 更好的 RXJava2 也许链接
- excel - 在工作表之间复制和粘贴_目标工作表受密码保护
- jestjs - Create React App 不能正确地模拟 __mocks__ 目录中的模块
- python - 在python中随机播放字典值
- java - 我不知道弹簧的哪个组件在做这个
- .net - 为 .net 安装 microsoft graph sdk 会导致 system.diagnostic.diagnosticsource 错误
- css - Bootstrap 4 列表组项目,右侧有箭头
- web-scraping - 使用 Xpath 捕获区分大小写的值的任何解决方法?
- javascript - 图像卡在一个位置