I’m trying to use the Illustrator exported svg in a three.js scene and I cannot make it work. Is there a specific option required to export from Illustrator I’m missing or is something missing from the code?
I didn’t find any documentation on what kind of svg files are supported. I even tried to change the svg code formatting to the same that the lion head example had with no luck. What am I doing wrong?
My code:
I was able to load your SVG file into the three.js editor.
However, it seems the text was loaded mirrored. So I had to rotate the object by 180° around the x-axis and configure the side property of all materials with THREE.BackSide. Not sure if this a bug in the loader.
1 Like
Yeah I saw later that it’s a problem on codepen that I cannot load in from my site… But I could not manage to load it in on my site neither, there were no errors in console, It said it’s loaded but I could’t see it in my scene anywhere. I tried to play around with scale too maybe it’s too small or too big on the scene but still no luck finding it.
Oh yeah It seems like it’s working there, the problem has to be with the code then that I’m using… Thanks @Mugen87 for pointing that out. Am I missing something from the loaders code?
I was trying to achieve it with the example code. Thanks for your help!
var titleloader = new THREE.SVGLoader();
titleloader.load( 'assets/barghest2.svg', function ( paths ) {
var group = new THREE.Group();
group.scale.multiplyScalar( 0.1 );
group.scale.y *= -1;
for ( var i = 0; i < paths.length; i ++ ) {
var path = paths[ i ];
var textmaterial = new THREE.MeshStandardMaterial({ color: 0xE74C3F, roughness:0, metalness:0, emissive: 0xE74C3F,side: THREE.DoubleSide,depthWrite: false });
var shapes = path.toShapes( true );
for ( var j = 0; j < shapes.length; j ++ ) {
var shape = shapes[ j ];
var geometry = new THREE.ShapeBufferGeometry( shape );
var mesh = new THREE.Mesh( geometry, textmaterial );
group.add( mesh );
}
}
scene.add( group );
} );
The code snippet looks good. There could still be a problem with your camera settings. Besides, when using a lit material like MeshStandardMaterial, it’s necessary to add some lights to your scene. Otherwise your shapes will stay black. Consider to use the unlit MeshBasicMaterial to check if that’s the problem.
nah, he would see it against the light backdrop in his codepan
