[3D] Make a 360 Degree Image Rotation Effect in Elementor Website | WordPress 3D Object/Model Viewer

Today, I'll show you how to make a 360 Degree Image Rotation Effect in Elementor Website. This is a WordPress 3D Object/Model Viewer tutorial.

✅Get Elementor Pro:

✅Get code snippet for 360 Degree Object Viewer:

✅Get this READY-MADE template on TEMPLATISH:

Today I’ll show you how you can create 3D image in your Elementor website. Here you can see a 360 degree view of an object/modeling where you can see it from any angle by dragging your mouse cursor. You can also add this kind of 3D viewer as a featured product, a hero section background or as any other section inside your website. By following this process you can also show any blender file to your WordPress website.

All we are gonna do here with the free version of Elementor. We don’t need Elementor Pro or any other WordPress plugin.

By the way, if you want, you can get the 360 degree featured product rotation template from my template shop. Here as a bonus, you'll also get the non-container version of that.

First, you need to go the Sketchfab website where you can get a lot of 3D models. From there download a GLTF file and upload that in your WordPress website using File Manager plugin.

Unzip the file and inside that we need to copy the link of that GLTF file. Inside the page, then we need to write some code and inside the code we also need to add the link of that GLTF file.

And Boom, It will be successfully added on your page. On that code there are also some customization options. Lastly, I'll also show you how you can design a 360 degree product viewer using this model.

So, that how you can make this 360 degree image animation in Elementor. If you enjoy this tutorial, don't forget to like and subscribe.

3D Object Download Link (Bike):

GLTF File Credit:

[ShahbazAli-nibf]

I was searching this for a long time thank you so much Amazing

[trevonfields]

This video was such a great solution. Thank you!!

[burgertifyargentina]

Hello!! Thank you for this amazing tutorial. Wanted to ask you if you know why it breaks on Safari Browser. I Can see everything properly on Chrome. But it doesn’t display in Safari. Have any fix for this?

[Luzenify]

Hey Buddy - really nice work! Thanks a on pushing Elementor-Boundaries like this.

[KindTom]

Thank you for the video. How do make an augmented reality experience from this 3D model?

[dorotheavogel]

Thank you so much for this tutorial. I had been trying to achieve this for a while and your explaination made it relly simple and easy to put a 3D model into the page.

[uenals-dworld]

very good tutorial thanks for the info👌

[jcpandi]

Hi, Thanks for this great tutorial.. Just wondering how can add animation to the 3D object, I would like to use drone that have animated propeller.

Hello,

I did exactly as you did but I am not getting any images. What do you think is the reason?

[Donny]

thats a very nice 1, the first 3d tutorial I seen on elementor. GG bro

[SamPyrtuh]

Thank you so much for this helpful tutorial.

[royb]

I never subscribe to channels, but I had to subscribe after seeing couple of videos.

[jazibakhursheed]

But if i need to give 3d veiw that image which is in my gallery or laptop how can i do that?

[apoloacademy]

Hello sir... How can I reduce the size of the 3d object?

[Iamblindanddeaf]

Hey sir I just bought ur template and I love it, could you explain me quickly how can I make 1 single background image for both sections, I could change it but separatly (the 2 sections) that make the images split in half. How can I make it as 1 same background for the 3d model and the text, thx

[amanireda]

Such a helpful video thank you! Can I do this effect on Adobe XD?

[SuleymanAkhundov]

Nice! Easy instructions, just added a sample gltf 3D file to the site. Is GLTF the most lightweight file format for 3D objects embedded into a website?

[skarabeu]

it's working on opera but not working on chrome, could you help me?

[JackExplorer-hvig]

hey bro thanks a lot for the tutorial! can you please help is out with zoom in and zoom out too?

[siddhubhai]

Hey bro that was ultra nice! 😊can you please tell me how to make mouse effect I mean when I will move my mouse on the page, the 3d object will slightly move towards the mouse, I am not able to explain you but I hope you will understand, a demo website is 'SPLINE' this website will be the demo for my words, please make a tutorial on my request😢 (wordpress, elementor) ❤😊