javascript - 动态更改 svg 的颜色并在 Three.js 中应用为纹理

Question

我正在尝试使用 Three.js 创建一个配置器，但我需要从根本上更改产品的颜色，我虽然可以使用 svg 作为纹理，但更改 svg 的填充属性并轻松更新纹理，但我没有得到好的结果

目前我所拥有的是

-一个带有 svg 的 3D 模型，它通过 TextureLoader 被应用为纹理，但是 svg 被放置在外部文件(“images/texture.svg”)中(另外 Three.js 正在减小纹理的大小，但是我认为这是一个映射问题)

-svg 是分层的，因此我可以手动更改颜色并应用它

但我试图让它变得动态，你选择一种颜色，它会自动更新应用为纹理的 svg

有什么想法吗？

谢谢!

Answer 1

我 fork 了别人的 fiddle 来展示解决方案。我添加了一个点击功能，可以修改 SVG 并重新绘制模型上的 Material 。

参见http://jsfiddle.net/L4pepnj7/

单击示例中的任意位置可更改 SVG 中圆圈的颜色。

将 SVG 转换为编码的 URI 的操作对于持续循环而言过于密集，但您可以在渲染器执行自己的操作时将颜色更改放入单击事件中。我在现有的 fiddle 中添加了一个名为“clickBody”的函数，该函数可以更改其中一个 SVG 元素的颜色。

var mesh;
var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(50, 500 / 400, 0.1, 1000);
camera.position.z = 10;

var renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(500, 400);
document.body.appendChild(renderer.domElement);

var svg = document.getElementById("svgContainer").querySelector("svg");
var svgData = (new XMLSerializer()).serializeToString(svg);

var canvas = document.createElement("canvas");
var svgSize = svg.getBoundingClientRect();
canvas.width = svgSize.width;
canvas.height = svgSize.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 texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
    material = new THREE.MeshBasicMaterial({
        map: texture
    });
    material.map.minFilter = THREE.LinearFilter;
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
};



var colors = ["red", "orange", "yellow", "green", "blue"];


var c = 0;

function clickBody() {
    document.getElementById("test").setAttribute("fill", colors[c]);
    var svgData = (new XMLSerializer()).serializeToString(svg);
    img.setAttribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgData))));
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        var texture = new THREE.Texture(canvas);
        material.map = texture;
        material.map.needsUpdate = true;
        renderer.render(scene, camera);
    }
    c = c + 1;
    if (c == colors.length) {
        c = 0;
    }
}
document.body.addEventListener("click", clickBody)

var render = function() {
    requestAnimationFrame(render);
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
};


render();