Create a 3D object to animate in html page

3.6k Views Asked by At

I am building a web page right now and my manager wants to have a specific earth (mean: shadow, and specific earth design) spinning on it. We have a team specialise in 3D models and they are ready to build the object.

But nor them or I know how to build it properly.

I was thinking about using canvas and greensock (GSAP) js library but the thing is, I don't know how to integrate a 3D object, what the extension of this object should be.

Maybe WebGl is more appropriate ? Or simply multiple images ?

Does anyone have an idea about it ?

EDIT : in order to be more specific, I can't use a gif or an already made animation cuse the earth has to spin while scrolling. If you don't scroll, the earth won't spin. Then the earth will slowly disappear and an other object will take it place.

1

There are 1 best solutions below

0
On BEST ANSWER

As read in comment, I decided to use Three.js in order to load the object.

Three.js has a function that permit to load .OBJ

Then I will use GSAP (GreenSock library) in order to make it move / rotate etc.