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

Posted 2023-03-25

【中文标题】如何将可编辑的文本和图像添加到threejs

【英文标题】：How to add editable text and images to threejs

【发布时间】：2021-10-12 19:17:17

【问题描述】：

所以我正在尝试使用织物 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，有人知道如何修复它吗？

【参考方案1】：

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

...必须关注

img.onload = function() ...

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

【讨论】：

其实，我正在尝试其他方式，我正在更新帖子

希望你能帮助我

没有什么可以说球形 uv 包裹是“错误的”，因为没有迹象表明什么是“正确的”。除了可疑的 ZONE 层之外，Fabric.js ui 没有天生的口袋、背部、袖子等指示。那么你设想正面和背面吗？在任何情况下，只需使用 Fabric.js 来减少和重新定位徽标并拖动它。从飞行前的角度来看，球形可能是最简单的。向丝网印刷机发送他们无论如何都可以修改的模型。

好的，但是有没有办法让fabricjs画布只包裹到某个区域？或者在这种情况下仅适用于 1 个 ZONE 层？

Fabric.js 的用途是合成纹理。 Three.js 的用途是将纹理应用于几何体。由于球形 uv 提供完整的覆盖，这是理想的。除非模型文件包含自定义 uv。或者，尽管是否准确导入了任何包含的 uv，您是否修改了几何图形？不确定的特定用户流可能需要按钮来执行您的功能。例如，您可以制作一个适合 Fabric.js 纹理到口袋的按钮，但如果他们想要流血怎么办？同样，球形会更容易。如果这是针对商品的，是否存在一个特定的模板？两个？