Is It Possible to Create a 3D Rotating Gallery around ThreeJs Model with GSAP....?

[Suyash Surve]

I recently explored Active Theory's website and was amazed by the work section they've created to showcase their projects. I'm curious to know if it is possible to create a 3D rotating gallery around a model, similar to what they have done, using GSAP....?

 

Here is the link : https://activetheory.net/work

[thehaes]

Of course, definetly possible. I've been using gsap to animate 3d elements in both threejs and r3f. 

Don't expect ready solution, but I would strongly suggest watching Yuri Artiukh streams on youtube - this one has something similar to what you're looking for, just need to modify it to your needs

[Suyash Surve]

Checked that, but that seems kind of different than what I want to achieve. He used webgl too which I'm unfamiliar with. So is there any other way that it can be possible with GSAP...? Like by adjusting position of each block and then on scroll it should move similar to the Active Theory's website....?

[thehaes]

1 hour ago, Suyash Surve said:

Checked that, but that seems kind of different than what I want to achieve. He used webgl too which I'm unfamiliar with. So is there any other way that it can be possible with GSAP...? Like by adjusting position of each block and then on scroll it should move similar to the Active Theory's website....?

Not sure what you mean, it uses threejs which is a library that is based on webgl, Yuri uses threejs and vanilla javascript so it's all the same. 

GSAP can animate almost anything in threejs, so you can easily create some planes on the canvas, give them textures, rotatations and position them the way you want, then wrap in group  and use gsap to animate that group like gsap.to(group.rotation, { y: 360 }) and adding scrollTrigger to it.