SVGLoader does not work perfectly

Questions
1

Hi all!,
I followed the example for using the SVGLoader. It works but only in part. I have a black and white svg but some parts of it seemed to have switched colors (black to white and vice versa). Any help or insight would be appreciated.

2

Hi, you’ll likely want to file a bug and include an SVG file that shows the problem.

3

alrighty!
the svg
Asset%202

4

the shades go from black to white somehow

5

This looks right to me in the threejs editor, what are you seeing and could you share your code? You may want to try the latest version of three.js if you haven’t yet.

23%20PM

1 Like
6

Hey! thanks for your interest.

the JS as follows:

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;

// instantiate a loader
var loader = new THREE.SVGLoader();

// load a SVG resource
loader.load(
	// resource URL
	'js/Asset 2.svg',
	// called when the resource is loaded
	function ( paths ) {

		var group = new THREE.Group();

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

			var path = paths[ i ];

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

			var shapes = path.toShapes( true );

			for ( var j = 0; j < shapes.length; j ++ ) {
        var extrudeSettings = {
        	steps: 1,
        	depth: -10,
        	bevelEnabled: false
        }
				var shape = shapes[ j ];
				var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
				var mesh = new THREE.Mesh( geometry, material );
				group.add( mesh );

			}

		}

		scene.add( group );

	},
	// called when loading is in progresses
	function ( xhr ) {

		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

	},
	// called when loading has errors
	function ( error ) {

		console.log( 'An error happened' );

	}


);
  camera.position.z = 500;

var animate = function () {

	requestAnimationFrame( animate );
	renderer.render( scene, camera );

};
animate();

Unfortunately I have been running into an error where it wont recognize the path or it cant load the SVG. I haven’t narrowed down that bit yet…

7

also please forgive my terrible formatting

8

I have fixed your code listing. Please have a look at the raw text (edit mode) in order to see how a proper formatting should look like.

Can you post the exact error message in this thread?

9

Thank you so much for all your help. Really did not expect all that much help…

Failed to load file:///C:/Users/user/Desktop/three.js/js/Asset%202.svg: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

10

Please read the following guide to understand the error situation. It should be exactly what you are looking for.

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

3 Likes
11

Thanks! worked well for me! I am still confused as to how other svgs were loading fine in the browser without an http server smh…

12

this use this code and svg and still can’t see anything