"THREE.SVGLoader is not a constructor"

Questions
1

I’m using v0.98, and this line produces a type error that SVGLoader is not a constructor.

const loader = new THREE.SVGLoader();

Any ideas what’s going on?

2

The class is no part of the core. You have to include it separately like shown in the following example:

https://threejs.org/examples/webgl_loader_svg.html

3

Ah ok thanks – I’m importing three.js into a React app like so: const THREE = require("three") and haven’t been able to get the external script working like the example you linked to. Do you know how I can properly import the SVGLoader from the npm_modules folder?

4

Nevermind about the import. I figured it out. :slight_smile:

However, I can’t get the SVG to appear. I verified the loader is working (it produces an object with all the path info) and I’m not receiving errors in the console. I’m basically copying the settings from the tiger example and even using that same svg file, but no luck.

The loader function might be providing a clue though. It prints out “Infinity% loaded” to the console, because xhr.total is always zero. Any ideas?

Full code from my componentDidMount method:

    this.renderer = new THREE.WebGLRenderer({
      canvas: this.canvas,
      antialias: true
    });

    const renderer = this.renderer;
    renderer.setClearColor(0xffffff);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    ////////////////// CAMERA
    this.camera = new THREE.PerspectiveCamera(
      35,
      window.innerWidth / window.innerHeight,
      0.1,
      3000
    );
    this.camera.position.set(0, 0, 200);

    ////////////////// SCENE
    this.scene = new THREE.Scene();
    const scene = this.scene;

    const helper = new THREE.GridHelper(160, 10);
    helper.rotation.x = Math.PI / 2;
    scene.add(helper);

    const light1 = new THREE.AmbientLight(0x85c210, 1.5);
    scene.add(light1);
    this.light2 = new THREE.PointLight(0xffffff, 0.4, 0, 2);
    const light2 = this.light2;
    scene.add(light2);
    const light3 = new THREE.HemisphereLight(0xffffff, 0x000000, 2);
    scene.add(light3);

    ////////////////// LOADER
    const loader = new THREE.SVGLoader();
    loader.load(
      "assets/svg/tiger.svg",
      paths => {
        const group = new THREE.Group();
        group.scale.multiplyScalar(0.25);
        group.position.x = -70;
        group.position.y = -70;
        group.scale.y *= -1;

        for (let i = 0; i < paths.length; i++) {
          const path = paths[i];

          const material = new THREE.MeshStandardMaterial({
            color: path.color,
            side: THREE.DoubleSide,
            depthWrite: false
          });

          const shapes = path.toShapes(true);

          for (let j = 0; j < shapes.length; j++) {
            const shape = shapes[j];
            const geometry = new THREE.ShapeBufferGeometry(shape);
            const mesh = new THREE.Mesh(geometry, material);
            group.add(mesh);
          }
        }

        scene.add(group);
      },
      xhr => {
        console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
      },
      error => {
        console.log("An error happened");
      }
5

The code looks okay. Any chances to provide a live example?

Apart from that, please ensure that you actually run your stuff on a local webserver. Read the following guide for more information.

https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally

6

I managed to get it working by cannibalizing the code you linked to, but I’m still not sure how. Anyway, big thanks for the help!

1 Like