<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:

src: the path to the target model file

Note: data-comp-animation can be useful here

Supported file types

Check out the allowed extensions from the Model.loadModel function
The current supported list is: dae, fbx, glb, obj, and stl

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;
                    }