SVG sprite disappears in Three.js?

Questions
, ,
1

As this Stack Overflow post suggests, I tried to use SVGLoader to load sharp-looking SVGs, and by changing some parameters of the three.js official SVGLoader example I was able to load SVGs nicely. However, when I try to change it to Sprite so that the SVG is always facing the screen, SVGs no longer show up, with no errors in console. Is there a way to achieve the effect without changing the facing of each SVG in each animation cycle (and without using TextureLoader)?

Code:

import {
  Mesh,
  Group,
  Color,
  MeshBasicMaterial,
  ShapeGeometry,
  Sprite,
  SpriteMaterial
} from 'three'
import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader'

const loader = new SVGLoader()

/**
 * @param {string} url Path to SVG file
 * @param {string} c Color
 */
const SVGNode = (url, c) => {
  const group = new Group()

  loader.load(url, (data) => {

    const paths = data.paths

    for (let i = 0; i < paths.length; i++) {

      const path = paths[i]
      const fillColor = path.userData.style.fill
      if (fillColor !== undefined && fillColor !== 'none') {

        const material = new MeshBasicMaterial({ // Change this to SpriteMaterial, and
          color: new Color().setStyle(c).convertSRGBToLinear()
        })

        const shapes = SVGLoader.createShapes(path)

        for (let j = 0; j < shapes.length; j++) {
          const shape = shapes[j]
          const geometry = new ShapeGeometry(shape)
          const mesh = new Mesh(geometry, material) // change this to Sprite, the group is no longer visible
          group.add(mesh)
        }

      }
    }

  })

  return group
}

export default SVGNode
2

material.side = THREE.DoubleSide;
Perhaps?

3

Unfortunately that does not work :sweat_smile: :sweat_smile:
I will try to write a codepen to demonstrate this (may take some time as I am using this in another library)

4

Found the solution, change this line

const mesh = new Mesh(geometry, material)

to

const mesh = new Sprite(material)
mesh.geometry = geometry
1 Like