|
|
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| <noinclude> | | <model-viewer |
| This template displays an interactive 3D model using <code><model-viewer></code>.
| | id="modelViewer-{{PAGENAME}}" |
| Works in VisualEditor. Be sure the site globally loads the model-viewer script (e.g. in `MediaWiki:Common.js`).
| | src="{{{src}}}" |
| | | alt="{{{alt|3D model}}}" |
| === Usage ===
| | camera-orbit="{{{cameraOrbit|165deg 75deg 4m}}}" |
| <pre>
| | style="display: block; width: {{{width|300px}}}; height: {{{height|300px}}}; margin-left: auto; margin-right: auto;" |
| {{ModelViewer
| | background-color="{{{backgroundColor|transparent}}}" |
| |src=https://survivalcraft.wiki/content/Models/Bear_Brown.glb
| | shadow-intensity="{{{shadowIntensity|1}}}" |
| |alt=Brown Bear
| | environment-image="{{{environmentImage|neutral}}}" |
| |width=300px
| | exposure="{{{exposure|1}}}" |
| |height=300px
| | loading="{{{loading|eager}}}" |
| |cameraOrbit=165deg 75deg 4m
| | {{#if:{{{poster|}}}| poster="{{{poster}}}"}} |
| |autoRotate=yes
| | {{#if:{{{autoRotate|}}}| auto-rotate}} |
| |cameraControls=yes
| | {{#if:{{{cameraControls|}}}| camera-controls}} |
| |backgroundColor=transparent
| | {{#if:{{{ar|}}}| ar}} |
| |shadowIntensity=1
| | {{#if:{{{autoplay|}}}| autoplay}} |
| |environmentImage=neutral
| | ></model-viewer> |
| |exposure=1
| |
| |ar=yes
| |
| |autoplay=no
| |
| |poster=https://example.com/poster.png
| |
| |loading=lazy
| |
| }}
| |
| </pre>
| |
| </noinclude>
| |
| | |
| {{#tag: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}} | |
| }}
| |
| | |
| <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>
