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

<div class="controls">

  <button id="face">Load face</button>

  <button id="bear">Load bears</button>

</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 faceSrc =

  "https://www.klaasnienhuis.nl/configdemo/subfolder-for-codepen/28ed8a4aae784ebdb505a25e636cbc4b/Klaas_profilePicture_large.jpg";

const bearSrc =

  "https://live.staticflickr.com/3708/9527460559_429618e5bc_z.jpg";

​

let scenetextures = [];

const getTextureByName = (name) => {

  return scenetextures.find((item) => item.name === name);

};

​

client.init("3e1a54cc0bb849f4a553b98ea401b7b4", {

  autostart: 1,

  ui_controls: 0,

  ui_infos: 0,

  ui_watermark: 0,

  ui_stop: 0,

  success: (api) => {

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

      let diskMaterial = null;

      api.getMaterialList(function (err, materiallist) {

        console.log(materiallist);

        diskMaterial = materiallist.find((item) => item.name === "Disk");

        diskMaterial.channels.AlbedoPBR.factor = 1;

        diskMaterial.channels.RoughnessPBR = { texture: null, factor: 0.8 };

        api.setMaterial(diskMaterial, function () {});

      });

​

      document.getElementById("face").addEventListener("click", () => {

        api.addTexture(faceSrc, (err, uid) => {

          diskMaterial.channels.AlbedoPBR.texture = { uid: uid };

          api.setMaterial(diskMaterial, function () {});

        });

      });

      document.getElementById("bear").addEventListener("click", () => {

        api.addTexture(bearSrc, (err, uid) => {

          diskMaterial.channels.AlbedoPBR.texture = { uid: uid };

          api.setMaterial(diskMaterial, function () {});

        });

      });

    });

  },

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

});

​