View source for Template:ModelViewer

<noinclude>
This template displays a 3D model using <code>&lt;model-viewer&gt;</code>.

=== Usage ===
<pre>
{{ModelViewer
 |src=https://survivalcraft.wiki/content/Models/Bear_Brown.glb
 |alt=Brown Bear
 |width=300px
 |height=300px
 |cameraOrbit=165deg 75deg 4m
 |autoRotate=yes
 |cameraControls=yes
 |backgroundColor=transparent
 |shadowIntensity=1
 |environmentImage=neutral
 |exposure=1
 |ar=yes
 |autoplay=no
 |poster=https://example.com/poster.png
 |loading=lazy
}}
</pre>
<model-viewer
    id="modelViewer-{{PAGENAME}}"
    src="{{{src}}}"
    alt="{{{alt|3D model}}}"
    camera-orbit="{{{cameraOrbit|165deg 75deg 4m}}}"
    style="display: block; width: {{{width|300px}}}; height: {{{height|300px}}}; margin-left: auto; margin-right: auto;"
    background-color="{{{backgroundColor|transparent}}}"
    shadow-intensity="{{{shadowIntensity|1}}}"
    environment-image="{{{environmentImage|neutral}}}"
    exposure="{{{exposure|1}}}"
    loading="{{{loading|eager}}}"
{{#if:{{{poster|}}}| poster="{{{poster}}}"}}
{{#if:{{{autoRotate|}}}| auto-rotate}}
{{#if:{{{cameraControls|}}}| camera-controls}}
{{#if:{{{ar|}}}| ar}}
{{#if:{{{autoplay|}}}| autoplay}}
></model-viewer>
<templatedata>
{
  "description": "Displays an interactive 3D model using <model-viewer>.",
  "params": {
    "src": {"label": "Model source URL","description": "URL of the .glb or .gltf file","type": "string","required": true},
    "alt": {"label": "Alternative text","description": "Accessibility text","type": "string","required": false},
    "width": {"label": "Width","description": "Width of viewer (e.g., 300px)","type": "string","required": false},
    "height": {"label": "Height","description": "Height of viewer (e.g., 300px)","type": "string","required": false},
    "cameraOrbit": {"label": "Camera orbit","description": "Initial camera orbit (e.g., 165deg 75deg 4m)","type": "string","required": false},
    "backgroundColor": {"label": "Background color","description": "Background color (e.g., transparent, #ffffff)","type": "string","required": false},
    "shadowIntensity": {"label": "Shadow intensity","description": "Shadow intensity (0-1)","type": "string","required": false},
    "environmentImage": {"label": "Environment image","description": "Environment image or 'neutral'","type": "string","required": false},
    "exposure": {"label": "Exposure","description": "Scene exposure value","type": "string","required": false},
    "loading": {"label": "Loading mode","description": "eager or lazy","type": "string","required": false},
    "poster": {"label": "Poster image","description": "Poster image URL (displayed before load)","type": "string","required": false},
    "autoRotate": {"label": "Auto rotate","description": "yes to enable auto-rotate","type": "boolean","required": false},
    "cameraControls": {"label": "Camera controls","description": "yes to enable user camera controls","type": "boolean","required": false},
    "ar": {"label": "Augmented reality","description": "yes to enable AR","type": "boolean","required": false},
    "autoplay": {"label": "Autoplay","description": "yes to autoplay animations","type": "boolean","required": false}
  }
}
</templatedata>
</noinclude>