1

I am loading an svg into a sprite using THREE.TextureLoader. the sprite that is displyed looks like it took the SVG and rendered it as png/bitmap. Is there a way to render SVG's as sprites and still have them displayed as vector graphics?

 var map = new THREE.TextureLoader;
    map.crossOrigin = "";
    var texture = map.load(fileName, function (texture) {
      var material = new THREE.SpriteMaterial({ map: texture, color: 16777215, fog: true });
      var img = new THREE.Sprite(material)
scene.add(img)
}
Shai Kimchi
  • 746
  • 1
  • 4
  • 22
  • 1
    No, svg always rastrized when you load it via `THREE.TextureLoader()`. Try [`THREE.SVGLoader()`](https://threejs.org/docs/index.html#examples/loaders/SVGLoader), in this case you'll get a set of shapes. – prisoner849 Jun 23 '19 at 08:36
  • Ok, thanks. can I use SVGLoader for use as sprite texrure? I've used SVGLoader and then used the svg data as shapes. but in that case how can make the shapes act as sprite? (always facing the camera) – Shai Kimchi Jun 23 '19 at 09:07
  • You can try to put all the shapes to a `THREE.Group()` object and then copy camera's quaternion in your animation loop: `group.quaternion.copy(camera.quaternion);` – prisoner849 Jun 23 '19 at 09:10
  • @prisoner849 How do we get it to rasterize at a higher resolution? When I put an `` side-by-side to a canvas with full-canvas-size Mesh, the image is crisp and clear, but the Mesh texture with SVG is blurry. – trusktr Oct 13 '21 at 13:29

0 Answers0