Including THREE.SVGLoader and THREE.SVGObject

Expo SDK
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.

1 Like
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. 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",
  ]
},
1 Like
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.

1 Like
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.

1 Like
11

Here’s a snack that shows this:

I have to run it on my device.

1 Like
12

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

13

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