<iframe id="api-frame"></iframe>

<div class="controls">

  <div>

    <input type="checkbox" id="rootnode" name="rootnode" checked>

    <label for="rootnode"> RootNode via scenegraph</label>

  </div>

  <div>

    <input type="checkbox" id="rootnode2" name="rootnode2" checked>

    <label for="rootnode2"> RootNode via Sketchfab</label>

  </div>

</div>

html,

body {

  padding: 0;

  margin: 0;

  width: 100vw;

  height: 100vh;

  overflow: hidden;

}

​

iframe {

  width: 100%;

  height: 100%;

  border: 0;

}

​

.controls {

  position: absolute;

  bottom: 0px;

  height: 80px;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  pointer-event: none;

}

​

.controls > * {

  margin-right: 15px;

  height: 40px;

  padding-left: 15px;

  padding-right: 15px;

}

​

const iframe = document.getElementById("api-frame");

const client = new Sketchfab(iframe);

​

const setVisibility = (api, instanceID, doShow) => {

  if (doShow) {

    api.show(instanceID);

  } else {

    api.hide(instanceID);

  }

};

​

client.init("ccbb631ba89a42bfb22dc46f42b58259", {

  success: (api) => {

    api.addEventListener("viewerready", () => {

      let rootID = null;

      let rootIDFromScenegraph = null;

      api.getSceneGraph(function (err, sceneGraph) {

        rootIDFromScenegraph = sceneGraph.instanceID;

      });

      api.getRootMatrixNode((err, instanceID) => {

        rootID = instanceID;

      });

      api.setBackground({ color: [1, 1, 1] });

      document.getElementById("rootnode").addEventListener("change", (e) => {

        if (rootIDFromScenegraph)

          setVisibility(api, rootIDFromScenegraph, e.target.checked);

      });

      document.getElementById("rootnode2").addEventListener("change", (e) => {

        if (rootID) setVisibility(api, rootID, e.target.checked);

      });

    });

  },

  error: () => console.error("Sketchfab API error")

});

​