如何使用 THREE.js 在平面上绘制 SVG 元素？

Question

我正在尝试在 THREE.js 场景中创建现有 svg 元素的副本。我使用this example 将svg 转换为图像，然后根据图像创建一个带有纹理的平面并将其添加到场景中。然而，飞机是黑色的。如果我使用纯色而不是纹理，它会正确渲染，所以我的纹理有问题。

        var legend = document.querySelector("svg.ViewLegend");
        var svgData = new XMLSerializer().serializeToString(legend);

        var canvas = document.createElement("canvas");
        canvas.width = 512;
        canvas.height = 64;
        var ctx = canvas.getContext("2d");

        var img = document.createElement("img");
        img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));

        img.onload = function () {
            ctx.drawImage(img, 0, 0);

            var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;

            var material = new THREE.MeshBasicMaterial({
                map: texture,
            });
            material.map.minFilter = THREE.LinearFilter;
            //If I use the material below, it works correctly
            //var material = new THREE.MeshPhongMaterial({color: 0xCC0000});
            var geometry = new THREE.PlaneBufferGeometry(512, 64, 1, 1);
            var mesh = new THREE.Mesh(geometry, material);

            scene.add(mesh);
        };

Answer 1

我相信你需要这样做：

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");
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);
  var material = new THREE.MeshBasicMaterial({ map: texture });
  material.map.minFilter = THREE.LinearFilter;
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
};

在以下位置创建小提琴：http://jsfiddle.net/3Lg911vs/4/