<div class="container">
  <div class="iframe-container">
    <iframe id="api-frame"></iframe>
  </div>
  <div class="explainer" id="explainer">
    <h3>Textures</h3>
    You can chagne textures in a material in two ways: use a texture already in the sketchfab scene, or upload a new one. Make sure new textures have their CORS headers enabled.
  </div>  
  <div class="controls" id="controls">
    <button id="swapSceneTexture">Swap scene textures</button>
    <button id="addOutsideTexture">Upload new (CORS enabled) texture</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: 100px;
    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 version = '1.10.0';
var urlid = '28ed8a4aae784ebdb505a25e636cbc4b';
var scenematerials = []
var scenetextures = []

function makeTexture(uid) {
  const texture = {
    magFilter: 'LINEAR',
    minFilter: 'LINEAR_MIPMAP_LINEAR',
    wrapS: 'REPEAT',
    wrapT: 'REPEAT',
    textureTarget: 'TEXTURE_2D',
    internalFormat: 'RGB',
    uid: uid
  }
  return texture
}

function addTexture(api, textureUrl) {
  return new Promise((resolve, reject) => {
    api.addTexture(textureUrl, (err, uid) => {
      if (err) {
        console.log(err)
      } else {
        resolve(uid)
      }
    })
  })
}

function actionSkfb() {
  // initialize
  var iframe = document.getElementById('api-frame');
  if (!iframe) {
    console.log('no target');
  }

  if (!window.Sketchfab) {
    console.log('no Sketchfab library');
  }
  var client = new window.Sketchfab(version, iframe);

  var error = function() {
    console.error('Sketchfab API error');
  };

  var success = function(api) {
    api.start(function() {
      api.addEventListener('viewerready', function() {        
        api.getMaterialList(function (err, materiallist) {
          scenematerials = materiallist
        })
        api.getTextureList(function (err, texturelist) {
          scenetextures = texturelist
        })
        

        document.getElementById('swapSceneTexture').addEventListener('click', function() {
          var mtl = scenematerials[2]
          var txt = scenetextures[(Math.floor(Math.random() * scenetextures.length))]
          var newTexture = makeTexture(txt.uid)
          mtl.channels.AlbedoPBR.texture = newTexture
          api.setMaterial(mtl, function(){})
        });   
        
        document.getElementById('addOutsideTexture').addEventListener('click', function() {
          var mtl = scenematerials[1]
          addTexture(api, "https://c1.staticflickr.com/9/8873/18598400202_3af67ef38f_q.jpg")
          .then(uid => {
            var newTexture = makeTexture(uid)
            mtl.channels.AlbedoPBR.texture = newTexture
            api.setMaterial(mtl, function(){})
          })
        });   
      });
    });
  };

  client.init(urlid, {
    success: success,
    error: error,
    ui_stop: 0,
    ui_inspector: 0, //disable the inspector and avoid downloading the wireframe
    ui_infos: 0, //need biz account
    ui_controls: 0, //need biz account
    scrollwheel: 1,
    ui_watermark: 0
  });
}

actionSkfb();

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://static.sketchfab.com/api/sketchfab-viewer-1.8.2.js