Does anyone know if there is a simple and “Expo friendly” way of getting THREE.SVGLoader and THREE.SVGObject into a project? They don’t seem to be in the THREE imported in a standard Expo project.
Hello @blamsoft, not yet but I have a strange obsession with three.js and a few hours to kill tonight - I’ll take a look for ya
Thank you. Any help would be appreciated!
Hmm, this will take some work. Looks like svg
stuff will need to be added to the browser-polyfill.
I assembled this little collection of polyfills https://github.com/expo/browser-polyfill for loading in images and stuff. I’m not quite sure how much shim it will require but that’s where I would start. <33
i think this won’t work unfortunately but maybe someone can figure out how to make it work
Here is my solution. I’m not saying it is the best solution ever. I have hacked the SVGLoader.js file and included it in my project. Dropbox - SVGLoader.js - Simplify your life. It requires the xml-dom package. npm install xml-dom. Include pakagerOpts in app.json.
import { FileSystem } from 'expo';
import SVGLoader from './SVGLoader';
async loadSVG(svgAsset) {
await svgAsset.downloadAsync();
const svgText = await FileSystem.readAsStringAsync(svgAsset.localUri);
const loader = new SVGLoader();
const shapePaths = loader.load(svgText);
const geometry = new THREE.Geometry();
for (let i = 0; i < shapePaths.length; i++) {
const shapes = shapePaths[i].toShapes();
for (let j = 0; j < shapes.length; j++) {
geometry.merge( new THREE.ExtrudeGeometry(shapes[j], { bevelEnabled: false, amount: 0.01 }) );
}
}
return geometry;
}
import { Asset } from 'expo';
...
const svgAsset = await Asset.fromModule(require(`./assets/mysvg.svg`));
var geometry = await this.loadSVG(svgAsset);
"packagerOpts": {
"assetExts": [
"svg",
]
},
Wow! This is great, maybe we should put this in expo-three
?? Initially I thought you wanted the ability to use SVGRenderer
Some people frown on having a hacked file that isn’t maintained. I’m okay with it.
Well I sit upside down, this is useful because then every appears to be smiling.
What could we do to make this less hacky?
I just mean it is no longer maintained in the three.js Github. I’m new here so I don’t really understand the process.
Here’s a snack that shows this:
I have to run it on my device.
Yeah this is great! Thanks for sharing and solving this. <33
This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.