Jump to content

Widget:ModelViewer: Difference between revisions

From Survivalcraft Wiki
← Older edit
VisualWikitext
No edit summary
No edit summary
 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
<span>
<includeonly>
<includeonly>
<model-viewer  
<model-viewer
     src="<!--{$src|escape}-->"  
     src="<!--{$src|escape}-->"  
     alt="<!--{$alt|escape|default:'3D Model'}-->"
     alt="<!--{$alt|escape|default:'3D Model'}-->"
     width="<!--{$width|escape}-->"
     style="width: <!--{$width|escape|default:'240px'}-->; height: <!--{$height|escape|default:'165px'}-->;"
    height="<!--{$height|escape}-->"
 
   
     <!--{if $poster}-->poster="<!--{$poster|escape}-->"<!--{/if}-->
     <!--{if $poster}-->poster="<!--{$poster|escape}-->"<!--{/if}-->
     <!--{if $loading}-->loading="<!--{$loading|escape}-->"<!--{/if}-->
     <!--{if $loading}-->loading="<!--{$loading|escape}-->"<!--{/if}-->
Line 56: Line 56:
</model-viewer>
</model-viewer>
</includeonly>
</includeonly>
 
</span>
<noinclude>
<noinclude>
{{Documentation}}
{{Documentation}}
<templatedata>
<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 '200px').",
      "type": "string",
"type": "string",
      "default": "100%"
"default": "240px"
    },
},
    "height": {
"height": {
      "label": "Height",
"label": "Height",
      "description": "Height of the viewer (e.g., '300px').",
"description": "Height of the viewer (e.g., '100%' or '200px').",
      "type": "string",
"type": "string",
      "default": "300px"
"default": "165px"
    },
},
    "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>
</templatedata>
</noinclude>
</noinclude>

Latest revision as of 21:14, 31 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]

ParameterDescriptionTypeStatus
Sourcesrc

URL to the 3D model file (e.g., .glb or .gltf).

Stringrequired
Alt textalt

Alternative text describing the model.

Default
3D Model
Stringoptional
Widthwidth

Width of the viewer (e.g., '100%' or '200px').

Default
240px
Stringoptional
Heightheight

Height of the viewer (e.g., '100%' or '200px').

Default
165px
Stringoptional
Poster imageposter

URL to an image displayed before the model loads.

Stringoptional
Loadingloading

Loading behavior ('eager' or 'lazy').

Stringoptional
Revealreveal

When to reveal the model ('auto', 'interaction').

Stringoptional
With credentialswithCredentials

Use cross-origin credentials when fetching resources.

Booleanoptional
Auto-rotateautoRotate

Automatically rotate the model.

Booleanoptional
Auto-rotate delayautoRotateDelay

Delay before auto-rotation starts, in milliseconds.

Stringoptional
Camera controlscameraControls

Allow user to control camera.

Booleanoptional
Background colorbackgroundColor

CSS color value for the viewer background.

Stringoptional
AR modear

Enable AR features.

Booleanoptional
iOS sourceiosSrc

URL to the USDZ model for AR on iOS.

Stringoptional
AR button textarButtonText

Custom text for the AR button.

Stringoptional
Loading textloadingText

Custom text to display while loading.

Stringoptional
Error texterrorText

Custom text to display if loading fails.

Stringoptional
Retrieved from "https://survivalcraft.wiki/index.php?title=Widget:ModelViewer&oldid=63426"