[3D] Make a 360 Degree Image Rotation Effect in Elementor Website

 

 

Code snippet for 3D 360 Degree Object Viewer:

<style>
model-viewer{
    width:100%;
    height: 100vh;
}
@media (max-width: 1024px) {
model-viewer{
    height:600px;
}
}
@media (max-width: 767px) {
model-viewer{
    height:350px;
}
}
</style>

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script> 

<model-viewer
    src="ADD_YOUR_GLTF_FILE"
    shadow-intensity="1"
    disable-zoom
    camera-controls
    auto-rotate
>
</model-viewer>

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>