Widget:ModelViewer: Difference between revisions

← Older edit

VisualWikitext

@@ Line 1: / Line 1: @@
+<span>
 <includeonly>
 <model-viewer
      src="<!--{$src|escape}-->"
      alt="<!--{$alt|escape|default:'3D Model'}-->"
-     width="<!--{$width|escape|default:'200px'}-->"
+     style="width: <!--{$width|escape|default:'240px'}-->; height: <!--{$height|escape|default:'165px'}-->;"
-    height="<!--{$height|escape|default:'200px'}-->"
      <!--{if $poster}-->poster="<!--{$poster|escape}-->"<!--{/if}-->
      <!--{if $loading}-->loading="<!--{$loading|escape}-->"<!--{/if}-->
@@ Line 56: / Line 56: @@
 </model-viewer>
 </includeonly>
+</span>
+<noinclude>
+{{Documentation}}
+<templatedata>
+{
+	"description": "Embeds a 3D model using the <model-viewer> web component. Supports many configuration parameters like camera controls, AR, environment, and animations.",
+	"params": {
+		"src": {
+			"label": "Source",
+			"description": "URL to the 3D model file (e.g., .glb or .gltf).",
+			"type": "string",
+			"required": true
+		},
+		"alt": {
+			"label": "Alt text",
+			"description": "Alternative text describing the model.",
+			"type": "string",
+			"default": "3D Model"
+		},
+		"width": {
+			"label": "Width",
+			"description": "Width of the viewer (e.g., '100%' or '200px').",
+			"type": "string",
+			"default": "240px"
+		},
+		"height": {
+			"label": "Height",
+			"description": "Height of the viewer (e.g., '100%' or '200px').",
+			"type": "string",
+			"default": "165px"
+		},
+		"poster": {
+			"label": "Poster image",
+			"description": "URL to an image displayed before the model loads.",
+			"type": "string"
+		},
+		"loading": {
+			"label": "Loading",
+			"description": "Loading behavior ('eager' or 'lazy').",
+			"type": "string"
+		},
+		"reveal": {
+			"label": "Reveal",
+			"description": "When to reveal the model ('auto', 'interaction').",
+			"type": "string"
+		},
+		"withCredentials": {
+			"label": "With credentials",
+			"description": "Use cross-origin credentials when fetching resources.",
+			"type": "boolean"
+		},
+		"autoRotate": {
+			"label": "Auto-rotate",
+			"description": "Automatically rotate the model.",
+			"type": "boolean"
+		},
+		"autoRotateDelay": {
+			"label": "Auto-rotate delay",
+			"description": "Delay before auto-rotation starts, in milliseconds.",
+			"type": "string"
+		},
+		"cameraControls": {
+			"label": "Camera controls",
+			"description": "Allow user to control camera.",
+			"type": "boolean"
+		},
+		"backgroundColor": {
+			"label": "Background color",
+			"description": "CSS color value for the viewer background.",
+			"type": "string"
+		},
+		"ar": {
+			"label": "AR mode",
+			"description": "Enable AR features.",
+			"type": "boolean"
+		},
+		"iosSrc": {
+			"label": "iOS source",
+			"description": "URL to the USDZ model for AR on iOS.",
+			"type": "string"
+		},
+		"arButtonText": {
+			"label": "AR button text",
+			"description": "Custom text for the AR button.",
+			"type": "string"
+		},
+		"loadingText": {
+			"label": "Loading text",
+			"description": "Custom text to display while loading.",
+			"type": "string"
+		},
+		"errorText": {
+			"label": "Error text",
+			"description": "Custom text to display if loading fails.",
+			"type": "string"
+		}
+	}
+}
+</templatedata>
+</noinclude>