javascript - a-frame 将我的 SVG 转换为像素图像

Question

我有一个带有 SVG 环绕的 ，但它显示像素。但是，a-frame 似乎不支持 Vectorgraphics。

有什么解决办法吗？

Answer 1

我会尝试将 svg 绘制到 canvas 元素上，然后将 Canvas 变成 texture using threejs :

html

<a-box svg-load></a-box>

js

AFRAME.registerComponent('svg-load', {
    init: function() {
        // grab the canvas element
        var canvas = document.getElementById('my-canvas')
        var ctx = canvas.getContext('2d');

        // create an image, which will contain the svg data
        var img = new Image();

        // this will be triggered when the provided .svg is loaded
        img.onload = () => {
          // draw the image on the canvas
          ctx.drawImage(img, 0, 0, 256, 256);

          // create the texture and material
          let texture = new THREE.Texture(canvas);
          texture.needsUpdate = true;
          let material = new THREE.MeshBasicMaterial({ map: texture });

          // grab the mesh, replace the material, dispose the old one
          let mesh = this.el.getObject3D("mesh")
          let tmp = mesh.material
          mesh.material = material
          tmp.dispose()
          }
        // provide the .svg file as the image source 
        img.src = "file.svg";
    }
)}

故障 here

---

您还可以提供 canvas as a material source ，但它在我看来仍然有问题。

<a-box material="src: my-canvas">