I am attempting to duplicate an existing svg element within a THREE.js environment. Following this example, I convert the svg to an image, create a plane with a texture based on the image, and then add it to the scene. However, I am encountering an issue where the plane appears black. When I replace the texture with a solid color, it renders correctly, indicating there might be an issue with the texture itself.
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);
};