This is the much more easier approach: Just go to https://modelviewer.dev/ and look up the example. The code I used in this Portfolio (written in Astro and Tailwind):
<div
class="relative w-full h-96 -mb-16 -mt-40 md:-mt-28 bg-transparent overflow-hidden"
>
<model-viewer
class="absolute w-full h-full inset-0 -top-4"
src="models/MY-MODEL-NAME.glb"
shadow-intensity="4"
camera-controls
disable-zoom
disable-pan
auto-rotate
auto-rotate-delay="0"
rotation-per-second="10deg"
camera-orbit="150deg 75deg 105% "
touch-action="pan-y"/>
</div>
<script
type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
></script>I did not want to show the loading bar on top of the model and the <model-viewer> component does not give you the possibility to not show the bar.
So I moved the <model-viewer> component a little upwards with
-mt-40 md:-mt-28 overview-hiddenThis little trick gave me the wanted results.