<div class="container">
  <div class="iframe-container">
    <iframe id="api-frame"></iframe>
  </div>
  <div class="explainer" id="explainer">
    You can navigate the annotations in three ways:
    <ol>
      <li>click the dot in the 3D model.</li>
      <li>use the built-in annotation menu at the center-bottom of the screen.</li>
      <li>use the viewer API and link your own controls to annotations. Be aware that the annotation array is 0-based.</li>
    </ol>
  </div>
  <div class="controls" id="controls">
    <button id="annotation1">Annotation 1</button>
    <button id="annotation2">Annotation 2</button>
    <button id="annotation3">Annotation 3 (instant camera movement)</button>
    <button id="annotation4">Annotation 4 (no camera movement)</button>
    <button id="annotation5">Annotation 5</button>
  </div>
</div>

html,
body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;

  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: grayscale;
  font-family: Open Sans, sans-serif;
}

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.iframe-container {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
}

.iframe-container > iframe {
  border: 0;
  width: 100%;
  flex: 1;
}

.explainer {
  height: 130px;
  padding: 15px 15px 0 15px;
  background-color: #e2e2e2;
  overflow: auto;
}

.controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  height: 80px;
  padding: 15px 0 0 15px;
  background-color: #f2f2f2;

  overflow: auto;
}

.controls > * {
  margin-right: 15px;
  margin-bottom: 15px;
}

var selectedState = false;
var dotState = true;

var success = function (api) {
  api.start(function () {
    api.addEventListener("viewerready", function () {
      document
        .getElementById("annotation1")
        .addEventListener("click", function () {
          api.gotoAnnotation(0);
        });
      document
        .getElementById("annotation2")
        .addEventListener("click", function () {
          api.gotoAnnotation(1);
        });
      document
        .getElementById("annotation3")
        .addEventListener("click", function () {
          api.gotoAnnotation(2, {
            preventCameraAnimation: true,
            preventCameraMove: false
          });
        });
      document
        .getElementById("annotation4")
        .addEventListener("click", function () {
          api.gotoAnnotation(3, {
            preventCameraAnimation: false,
            preventCameraMove: true
          });
        });
      document
        .getElementById("annotation5")
        .addEventListener("click", function () {
          api.gotoAnnotation(4);
        });
    });
  });
};

const loadSketchfab = (sceneuid, elementId) => {
  // To get started with Sketchfab, we need to create a client
  // object for a certain iframe in the DOM
  const iframe = document.getElementById(elementId);
  const client = new Sketchfab("1.12.1", iframe);

  // Then we can initialize the client with a specific model
  // and some player parameters
  client.init(sceneuid, {
    success: success,
    error: () => console.error("Sketchfab API error"),
    ui_annotations: 1, //show the annotation menu
    ui_general_controls: 0, //hide the ui controls in teh bottom right
    ui_infos: 0, //hide the model info at the top
    scrollwheel: 1,
    ui_watermark: 0
  });
};

loadSketchfab("14749f029392444d82512146e6f26f3c", "api-frame");