如何使用三个ejs加载Fabrijs作为obj的纹理 [英] how to load fabricjs as texture for obj using threejs

问题描述

我正在尝试使用三个ejs为我的3D模型添加SVG作为我的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是Fabrijs Canvas，但THREE.Texture仅支持image

https://threejs.org/docs/#api/en/textures/Texture    
Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )

所以我使用canvas标记更改了参数

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

通过这种方式，Canvas标记被映射到3D模型。如果我没有提供最好的解释，我很抱歉，但希望它能帮助某人

这篇关于如何使用三个ejs加载Fabrijs作为obj的纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！