Skip to main content

See My Model Viewer

Overview​

SeeMyModel Viewer is a web components package that includes three web-components:

  • <see-my-model> to view one model from seemymodel.com
  • <see-my-model-group> to view group of models from seemymodel.com
  • <see-my-model-button> to insert Augmented Reality button of models from seemymodel.com

Installation​

You can download SeeMyModel web components script from https://scripts.seemymodel.com/web-components/latest/web-components.js To inject it on your page simply include a script tag:

<script
  type="module"
  src="https://scripts.seemymodel.com/web-components/latest/web-components.js"
></script>

As easy as HTML​

SeeMyModel web components are just HTML elements. You can use them anywhere you can use HTML! To view a model from seemymodel.com you need to pass its id as model-access-key attribute

<see-my-model
  model-access-key="5fc8f5035158fc001aa3a05d"
  style="width: 100%;"
></see-my-model>

Declarative rendering​

Our web components can be used with declarative rendering libraries like Angular, React, Vue, and lit-html

import { html, render } from "lit-html";

const groupID = "491ca3527c9666841baa90af";

render(
  html`
    <see-my-model-group
      folder-access-key=${groupID}
      style="width: 100%;"
    ></see-my-model-group>
  `,
  document.body
);