如何将可编辑的文本和图像添加到threejs

Question

所以我正在尝试使用织物 js 将新图像和文本作为 3d 对象的纹理添加到我的 3d 配置器中，我使用此代码作为代码库 https://github.com/devramkumardnagarajan/3d-Tshirt-design 和织物 js 的代码 https://codepen.io/ricardcreagia/pen/EdEGod，这就是我所做的

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

这是我加载 svg 的方式

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.needsUpdate = true;
                map = texture;
                textureMaterial = new THREE.MeshPhongMaterial({ map: map });
                load_materials();
                load_styles();
                response(true);
            }
        }
    };
}

我将texture 映射到textureMaterial，这就是我得到的

它没有正确映射 UV，有人知道如何修复它吗？

Answer 1

img.setAttribute("src", ... )

...必须关注

img.onload = function() {...}

...以便资源/事件保持正确的顺序。你不能依赖吊装。也许 undefined 每个 Fabric 都会有一个“中心”，但是该特定代码不存在（？）。