Template:ModelViewer: Difference between revisions

Revision as of 19:41, 29 July 2025

This template displays an interactive 3D model using <model-viewer>. Works in VisualEditor. Be sure the site globally loads the model-viewer script (e.g. in `MediaWiki:Common.js`).

Usage

{{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
}}

<model-viewer 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"> id=modelViewer-ModelViewer </model-viewer>

Displays an interactive 3D model using <model-viewer>.

Template parameters
Parameter		Description	Type	Status
Model source URL	`src`	URL of the .glb or .gltf file	String	required
Alternative text	`alt`	Accessibility text	String	optional
Width	`width`	Width of viewer (e.g., 300px)	String	optional
Height	`height`	Height of viewer (e.g., 300px)	String	optional
Camera orbit	`cameraOrbit`	Initial camera orbit (e.g., 165deg 75deg 4m)	String	optional
Background color	`backgroundColor`	Background color (e.g., transparent, #ffffff)	String	optional
Shadow intensity	`shadowIntensity`	Shadow intensity (0-1)	String	optional
Environment image	`environmentImage`	Environment image or 'neutral'	String	optional
Exposure	`exposure`	Scene exposure value	String	optional
Loading mode	`loading`	eager or lazy	String	optional
Poster image	`poster`	Poster image URL (displayed before load)	String	optional
Auto rotate	`autoRotate`	yes to enable auto-rotate	Boolean	optional
Camera controls	`cameraControls`	yes to enable user camera controls	Boolean	optional
Augmented reality	`ar`	yes to enable AR	Boolean	optional
Autoplay	`autoplay`	yes to autoplay animations	Boolean	optional

@@ Line 1: / Line 1: @@
 <noinclude>
-This template displays a 3D model using <code>&lt;model-viewer&gt;</code>.
+This template displays an interactive 3D model using <code>&lt;model-viewer&gt;</code>.
+Works in VisualEditor. Be sure the site globally loads the model-viewer script (e.g. in `MediaWiki:Common.js`).
 === Usage ===
@@ Line 22: / Line 23: @@
 }}
 </pre>
-<model-viewer
+</noinclude>
-    id="modelViewer-{{PAGENAME}}"
-    src="{{{src}}}"
+{{#tag:model-viewer
-    alt="{{{alt|3D model}}}"
+| id=modelViewer-{{PAGENAME}}
-    camera-orbit="{{{cameraOrbit|165deg 75deg 4m}}}"
+| src={{{src}}}
-    style="display: block; width: {{{width|300px}}}; height: {{{height|300px}}}; margin-left: auto; margin-right: auto;"
+| alt={{{alt|3D model}}}
-    background-color="{{{backgroundColor|transparent}}}"
+| camera-orbit={{{cameraOrbit|165deg 75deg 4m}}}
-    shadow-intensity="{{{shadowIntensity|1}}}"
+| style=display: block; width: {{{width|300px}}}; height: {{{height|300px}}}; margin-left: auto; margin-right: auto;
-    environment-image="{{{environmentImage|neutral}}}"
+| background-color={{{backgroundColor|transparent}}}
-    exposure="{{{exposure|1}}}"
+| shadow-intensity={{{shadowIntensity|1}}}
-    loading="{{{loading|eager}}}"
+| environment-image={{{environmentImage|neutral}}}
-{{#if:{{{poster|}}}| poster="{{{poster}}}"}}
+| exposure={{{exposure|1}}}
-{{#if:{{{autoRotate|}}}| auto-rotate}}
+| loading={{{loading|eager}}}
-{{#if:{{{cameraControls|}}}| camera-controls}}
+{{#if:{{{poster|}}}|{{!}} poster={{{poster}}}}}
-{{#if:{{{ar|}}}| ar}}
+{{#if:{{{autoRotate|}}}|{{!}} auto-rotate}}
-{{#if:{{{autoplay|}}}| autoplay}}
+{{#if:{{{cameraControls|}}}|{{!}} camera-controls}}
-></model-viewer>
+{{#if:{{{ar|}}}|{{!}} ar}}
+{{#if:{{{autoplay|}}}|{{!}} autoplay}}
+}}
+<noinclude>
 <templatedata>
 {