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}-->
      <!--{if $reveal}-->reveal="<!--{$reveal|escape}-->"<!--{/if}-->
      <!--{if $withCredentials}-->with-credentials<!--{/if}-->
      <!--{if $autoRotate}-->auto-rotate<!--{/if}-->
      <!--{if $autoRotateDelay}-->auto-rotate-delay="<!--{$autoRotateDelay|escape}-->"<!--{/if}-->
      <!--{if $rotationPerSecond}-->rotation-per-second="<!--{$rotationPerSecond|escape}-->"<!--{/if}-->
      <!--{if $cameraControls}-->camera-controls<!--{/if}-->
      <!--{if $cameraOrbit}-->camera-orbit="<!--{$cameraOrbit|escape}-->"<!--{/if}-->
@@ Line 36: / Line 33: @@
      <!--{if $animationCrossfadeDuration}-->animation-crossfade-duration="<!--{$animationCrossfadeDuration|escape}-->"<!--{/if}-->
      <!--{if $autoplay}-->autoplay<!--{/if}-->
      <!--{if $variantName}-->variant-name="<!--{$variantName|escape}-->"<!--{/if}-->
      <!--{if $orientation}-->orientation="<!--{$orientation|escape}-->"<!--{/if}-->
      <!--{if $scale}-->scale="<!--{$scale|escape}-->"<!--{/if}-->
      <!--{if $environmentImage}-->environment-image="<!--{$environmentImage|escape}-->"<!--{/if}-->
      <!--{if $skyboxImage}-->skybox-image="<!--{$skyboxImage|escape}-->"<!--{/if}-->
@@ Line 47: / Line 42: @@
      <!--{if $exposure}-->exposure="<!--{$exposure|escape}-->"<!--{/if}-->
      <!--{if $toneMapping}-->tone-mapping="<!--{$toneMapping|escape}-->"<!--{/if}-->
      <!--{if $ar}-->ar<!--{/if}-->
      <!--{if $arModes}-->ar-modes="<!--{$arModes|escape}-->"<!--{/if}-->
@@ Line 54: / Line 48: @@
      <!--{if $iosSrc}-->ios-src="<!--{$iosSrc|escape}-->"<!--{/if}-->
      <!--{if $xrEnvironment}-->xr-environment<!--{/if}-->
      <!--{if $backgroundColor}-->style="background-color: <!--{$backgroundColor|escape}-->;"<!--{/if}-->
      <!--{if $generateSchema}-->generate-schema<!--{/if}-->
-    >
      <!--{if $loadingText}--><div slot="progress-bar"><!--{$loadingText|escape}--></div><!--{/if}-->
      <!--{if $errorText}--><div slot="error"><!--{$errorText|escape}--></div><!--{/if}-->
      <!--{if $arButtonText}--><button slot="ar-button"><!--{$arButtonText|escape}--></button><!--{/if}-->
+     >
 </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>