I've had success using svg files with Three.js versions R76 and R77, but now in R78 I can only get it to work with pngs and jpgs
var floor = new THREE.TextureLoader();
floor.load('layout.svg', function ( texture ) {
var geometry = new THREE.PlaneBufferGeometry(4096, 4096);
var material = new THREE.MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh(geometry, material);
mesh.rotation.x = -Math.PI / 2;
scene.add(mesh);
} );
Since encountering this issue in R78, I have added progress and error functions to the load arguments...
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
function ( xhr ) {
console.log( 'An error happened' );
}
...which shows that the svg is 100% loaded in r78, but doesn't display in the scene. I previously used phongmaterial for reflection properties and transparency to create a floating effect with svg elements in a skymap, which was great fun. My question now is, how do I make this work again?
In R77, the svg mapped to a planeBufferGeometry in FF or Chrome.
In R78, it won't load without any errors shown on Firebug.
UPDATE
I looked into SVGLoader.js, SVGRenderer.js (requiring Projector.js). While these render an svg file facing the camera and respond to translations, rotations (i.e. perspective view) are not possible. I tried adding an xml header and doctype to the svg file, but Three.js seems unbothered by their absence. Using localhost made no difference in FF, but was required in Chrome.
It appears that the issue lies either with TextureLoader or WebGLRenderer, both of which have undergone significant changes in R78.
I briefly tested the dev version, and it behaved like R78 does.
Can anyone offer suggestions on where to go from here? I'm unsure whether to report this as a bug or request a "feature restore". Here's the desired effect.