0

I am trying to load svg and use it as a texture for some parts of my 3d scene in react-three-fiber. The issue I am trying to fix is that somet of the textures are quite blurry even though I have big raster images.

I can load an svg using react-three-drei's component, and it looks super crisp.

Is there a way I can load svg as a texture for a mesh? Or should I go about it as I somehow link the component to the mesh and mimic its size and movement during animations?

Not sure how I can do this.

I've tried adding the svg files directly in my gltf file as texture with mimetype image/svg+xml but react three-fiber gives an error about enconding.

Also I've tried using useTexture() with the svg source which does work, however blurry as the raster textures.

I want to know if it is possible for me to achieve this somehow. Or if there is an alternative to making my scene render crisper.

user2791747
  • 163
  • 1
  • 2
  • 9

1 Answers1

0

Hi sadly textures are raster images only… There is technique called SDF 2d but this would also involve converting svg to image…

You can check it here https://github.com/dy/svg-path-sdf

The way it works, it coverts svg to raster under the hood, for you, maybe there is some options for it, however I would recommend process your svg to png or jpg manually…

antokhio
  • 1,497
  • 2
  • 11
  • 16