<mr-model>

<mr-model> is used to load 3D model files.

Example

mr-panel { background-color: LightSkyBlue; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; width: 100vw; height: 100vh; } #koi { scale: 0.05; z-index: 70; }

Definition and Usage

<mr-model> has one required attribute:

Supported file types

Note: certain filetypes require additional inputs to ‘src’ (for ex: ‘obj’). Check the documentation if you are unsure.

Anchoring 3D elements

3D elements can flow alongside with text inside an <mr-panel>

Amet sed pulvinar amet a mi est adipiscing rhoncus enim. Dui in nulla labore quis nibh consectetur tempor vulputate diam. Sed hendrerit risus gravida labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore disputandum putant. Sed ut iis bonis erigimur, quae expectamus, sic laetamur iis, quae et splendide dicta sint neque sint conversa. mr-panel { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap: 10px; padding: 20px; } mr-text { max-width: 600px; } #bowtie { width: 100px; height: 100px; z-index: 70; scale: 0.1; }