SVG sprite disappears in Three.js?

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)?


import {
} 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 =
      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



  return group

export default SVGNode

material.side = THREE.DoubleSide;

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)

Found the solution, change this line

const mesh = new Mesh(geometry, material)


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