"Pre-bake" or include SVG into threejs code so doesn't need to load dynamically

Questions
,
1

I’m working on a small site that has a very simple 3d animation in it. The model is extruded from an SVG file that is loaded using SVGLoader. I’d like to optimize loading speed and include the SVG as text into my threejs code so it doesn’t need to do separate http request but has it already loaded and so it can be executed instantly.

How would you go about this? Would it be easier if it was an STL?

I just want to get rid of that separate http request basically and include the model with the code.

Thanks!

2

Why don’t you just embed the SVG code directly in the HTML markup? Something like:

<div class="svg">
    <svg width="100%" height="100%" viewBox="0 0 2287 1276">
    </svg>
</div>

In this way, you have no separate HTTP request.

3

@Mugen87 thanks but how can I then use that for extrusion with threejs?

4

Well, you read the SVG content from the DOM and then use SVGLoader.parse() to generate shape definitions.

1 Like
5

@Mugen87 thanks I didn’t know about SVGLoader.parse() method! Isn’t it documented? I have also had the idea to log out the result of SVGLoader.load(file.svg) and save that into a JSON to bypass the SVGLoader.load() step. Will the SVGLoader.parse() only take SVG data URI though?

6

I believe you’d give the svg an id, then reference that. <svg id=‘mySvg’ …> am I correct, guys?

7

Here is what I’m trying to do: https://github.com/riccardolardi/studioriccardolardi/blob/072b0d780e7f95c62d919e4548099b6e9da3ca18/src/components/BG.svelte#L45

8

Ok I managed to use SVGLoader.parse() to get the shape data. It needs to receive the SVG data as a string. Thanks guys