8

I'm new to three.js and WebGL in general and I'm trying to make a simple earth globe in 3D with a SVG texture applied on it (so that I can zoom in without quality loss).

I tried to load a svg image instead of my png image. I worked, but the image was "rasterized" removing all advantages of using svg :/

Is is possible to do that ? If yes how ?

Thanks

this.loader = new THREE.TextureLoader();
    this.loader.load("someimage.svg", texture => {
      //create the sphere
      const sphere = new THREE.SphereGeometry(RADIUS, SEGMENTS, RINGS);

      //map the texture to the material. Read more about materials in three.js docs
      const material = new THREE.MeshBasicMaterial({
        map: texture,
        overdraw: 0.5
      });

      //create a new mesh with sphere geometry.
      const mesh = new THREE.Mesh(sphere, material);

      //add mesh to globe group
      this.globe.add(mesh);
    });
gman
  • 100,619
  • 31
  • 269
  • 393
Théo Champion
  • 1,701
  • 1
  • 21
  • 46
  • 1
    could you re-render the svg every time you change the camera? i know its not exactly a solution but it might work? – mast3rd3mon Apr 16 '18 at 15:03
  • So SVG is vector grpahics and WebGL leverages "canvas" which is raster graphics. If you want to get "zoom in" without quality loss you will need to use SVGrenderer for three.js, but I am not sure if that would allow you to work with WebGL at the same time. Check this one example out: https://codepen.io/wandrianpenguin/pen/EKzPNM – Sergey Rudenko Apr 16 '18 at 17:00
  • 2
    You cannot render svg with webgl. These are two completely different things i believe. One is a vector format, the other is a rasterization engine. What three.js does is what you found out yourself - rasterizes the svg, and then uses the result as a texture. – pailhead Apr 16 '18 at 22:10
  • 2
    But you can create your loader for svg (it will be 2d) as vector data (svg -> three buffer geometry). I made my own loader of postgis data (3d/2d) – SalientBrain Apr 27 '18 at 17:38
  • this thread may give you some insights, though SVG is not the input there, - the result is nearly the same as you expect: https://stackoverflow.com/questions/54484537/polygon-triangulation-for-globe/55166015#55166015 – Alex Khoroshylov Jan 25 '20 at 13:09

0 Answers0