Error when recreating SVGRenderer Lines Example

Questions
,
1

I’m attempting to recreate the svg lines example (three.js/examples/svg_lines.html at c19a4c9fb09aa021c14e04190eb4c9106ec6eac6 · mrdoob/three.js · GitHub) and each time I do i get:

Uncaught SyntaxError: The requested module ‘/SVGTest/js/SVGRenderer.js’ does not provide an export named ‘SVGRenderer’

in response to svg_lines.html:27

the export is clearly defined on SVGRenderer.js:554

Any ideas why I can’t import that function?

thanks!

3

I’ve reworked the example without using modules to see if it was a file path error, starting from scratch with a new folder, clearing my cache etc. as such:

<body>
		<script src="js/three.js"></script>
		<script src="js/SVGRenderer.js"></script>
		<script>
			var camera, scene, renderer;
			init();
			animate();
			function init() {
				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 0.1, 100 );
				camera.position.z = 10;
				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0, 0, 0 );
				renderer = new SVGRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );

Now I get the error:

Uncaught ReferenceError: SVGRenderer is not defined
at init (index.html:29) ie. renderer = new SVGRenderer();

stumped…

Would love if someone could show me a quick way to avoid this

4

I this case, you have to create the renderer like so: renderer = new THREE.SVGRenderer();.

When importing classes from the js directory, they are always defined in the THREE namespace. This is not true for the respective module versions.