Jump to content

Widget:ModelViewer: Difference between revisions

No edit summary
No edit summary
Line 56: Line 56:
</model-viewer>
</model-viewer>
</includeonly>
</includeonly>
<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 '500px').",
      "type": "string",
      "default": "100%"
    },
    "height": {
      "label": "Height",
      "description": "Height of the viewer (e.g., '300px').",
      "type": "string",
      "default": "300px"
    },
    "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>