three.jswebgltquery

WebGL Change Shape Animation


I'm creating a 3D globe with a map on it which is supposed to unravel and fill the screen after a few seconds.

I've managed to create the globe using three.js and webGL, but I'm having trouble finding any information on being able to animate a shape change. Can anyone provide any help? Is it even possible?


Solution

  • In 3D, anything and everything is possible. ;)

    Your sphere geometry has it's own vertices, and basically you just need to animate their position, so after animation they are all sitting on one planar surface.

    Try creating sphere and plane geometry, with same number of vertices, and animating sphere's vertices with interpolated values of sphere's and plane's original values. That way, on the start you would have sphere shape and in the end, plane shape.

    Hope this helps, tell me if you need more directives how to do it.

    myGlobe.geometry.vertices[index].position = something_calculated;
    // myGlobe is instance of THREE.Mesh and something_calculated would be THREE.Vector3 instance that you can calculate in some manner (sphere-plane interpolation over time)