3d Wave Animations from SVG

Questions
, ,
1

Newbie here. I have an eps or ai with a wave image with dots. I want it to load, however keep each dot as a shape so that I can animate the whole thing as a wave. It should be in the 3d space so I need to get the svg when I load it somehow with the positions for each dot in the 3d space. I haven’t manage yet to figure out how to get z - axis coordinates for my dots and keep the depth. The image probably matches a waveform function however I cannot know that.

Is there a way to do that and still be able to manage the amplitude, speed and other factors of the animation with ThreeJs? If so, I would appreciate some guidelines on how to do it in a few sentences so that I could do some additional research on the right direction. You will find the eps and ai in this wetransfer link (https://wetransfer.com/downloads/1a72226a52e3ece9c88fa730c3b24a0c20201022105847/c1d0ca) since I cannot attach files with that size.

2

/cc

3

@Mugen87 I posted that question. I managed to load the SVG with ThreeJs SVGLoader and instead of using ShapeBufferGeometry similarly to ThreeJs documentation’s example of SVGLoader, I splitted the paths and subPaths and just used the position vertices. It worked in creating almost the exact SVG appearance with different z values per layer. I am currently trying to optimize it because I have multiple same objects.