How to animate a point based shape?

I am going to build an animation like the video.

Someone recommended me the progress of building the animation.

  1. create a base 3D model but set it to invisible
  2. Have partcicles attach to the the 3D model
  3. Add interactivity to the particles so that they react to mouse movement
  4. Add shaders and textures

But I want to find similar example of the video.
Is anyone who have seen similar example before?

You can load the model and just interpret the geometry as points instead of triangles. Check out the following fiddle to see this approach:

https://jsfiddle.net/f2Lommf5/11491/

Instead of using PointsMaterial, you can create a custom ShaderMaterial or RawShaderMaterial and then animate the geometry in the vertex shader. The following example might help you to achieve the desired effect:

http://oos.moxiecode.com/js_webgl/stanford_bunny/

2 Likes

Thanks, Mugen87.
Is there any similar example with the video?

AFAIK, no. But I guess the animated stanford bunny demo should be pretty similar from a technical point of view.

1 Like

Ok. Thanks