|
|
| (5 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <noinclude>
| |
| This template displays a 3D model using <code><model-viewer></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>
| |
| </noinclude>
| |
| <model-viewer | | <model-viewer |
| id="modelViewer-{{PAGENAME}}" | | id="modelViewer-{{PAGENAME}}" |
| Line 34: |
Line 10: |
| exposure="{{{exposure|1}}}" | | exposure="{{{exposure|1}}}" |
| loading="{{{loading|eager}}}" | | loading="{{{loading|eager}}}" |
| poster="{{{poster|}}}"
| | {{#if:{{{poster|}}}| poster="{{{poster}}}"}} |
| {{#if:{{{autoRotate|}}}| auto-rotate}} | | {{#if:{{{autoRotate|}}}| auto-rotate}} |
| {{#if:{{{cameraControls|}}}| camera-controls}} | | {{#if:{{{cameraControls|}}}| camera-controls}} |
| {{#if:{{{ar|}}}| ar}} | | {{#if:{{{ar|}}}| ar}} |
| {{#if:{{{autoplay|}}}| autoplay}} | | {{#if:{{{autoplay|}}}| autoplay}} |
| > | | ></model-viewer> |
| </model-viewer> | |
| <noinclude>
| |
| <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>
| |
<model-viewer
id="modelViewer-ModelViewer"
src="{{{src}}}"
alt="3D model"
camera-orbit="165deg 75deg 4m"
style="display: block; width: 300px; height: 300px; margin-left: auto; margin-right: auto;"
background-color="transparent"
shadow-intensity="1"
environment-image="neutral"
exposure="1"
loading="eager"
></model-viewer>
