Template:ModelViewer

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