Including THREE.SVGLoader and THREE.SVGObject


#1

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.


#2

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 :blue_heart::fire::space_invader:


#3

Thank you. Any help would be appreciated!


#4

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


#5

i think this won’t work unfortunately :confused: but maybe someone can figure out how to make it work


#6

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. https://www.dropbox.com/s/f7r2mm0pj82ej10/SVGLoader.js?dl=0. 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",
  ]
},

#7

Wow! This is great, maybe we should put this in expo-three ?? Initially I thought you wanted the ability to use SVGRenderer :joy::sweat_smile:


#8

Some people frown on having a hacked file that isn’t maintained. I’m okay with it.


#9

Well I sit upside down, this is useful because then every appears to be smiling. :upside_down_face:
What could we do to make this less hacky?


#10

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.


#11

Here’s a snack that shows this:
https://snack.expo.io/@blamsoft/svg-loader-example

I have to run it on my device.


#12

Yeah this is great! Thanks for sharing and solving this. <33


closed #13

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.