Widget:ModelViewer: Difference between revisions

Revision as of 19:36, 30 July 2025

Embeds a 3D model using the <model-viewer> web component. Supports many configuration parameters like camera controls, AR, environment, and animations.

Template parameters[Edit template data]
Parameter		Description	Type	Status
Source	`src`	URL to the 3D model file (e.g., .glb or .gltf).	String	required
Alt text	`alt`	Alternative text describing the model. Default 3D Model	String	optional
Width	`width`	Width of the viewer (e.g., '100%' or '500px'). Default 100%	String	optional
Height	`height`	Height of the viewer (e.g., '300px'). Default 300px	String	optional
Poster image	`poster`	URL to an image displayed before the model loads.	String	optional
Loading	`loading`	Loading behavior ('eager' or 'lazy').	String	optional
Reveal	`reveal`	When to reveal the model ('auto', 'interaction').	String	optional
With credentials	`withCredentials`	Use cross-origin credentials when fetching resources.	Boolean	optional
Auto-rotate	`autoRotate`	Automatically rotate the model.	Boolean	optional
Auto-rotate delay	`autoRotateDelay`	Delay before auto-rotation starts, in milliseconds.	String	optional
Camera controls	`cameraControls`	Allow user to control camera.	Boolean	optional
Background color	`backgroundColor`	CSS color value for the viewer background.	String	optional
AR mode	`ar`	Enable AR features.	Boolean	optional
iOS source	`iosSrc`	URL to the USDZ model for AR on iOS.	String	optional
AR button text	`arButtonText`	Custom text for the AR button.	String	optional
Loading text	`loadingText`	Custom text to display while loading.	String	optional
Error text	`errorText`	Custom text to display if loading fails.	String	optional

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