Custom Viewer to change textures (API)

(Nome Wiesbaden) #1

Hi there,

I am trying to use the viewer API to create a custom viewer with buttons to change the textures of a material.
This is the test model I am currently using:

The Idea is to change the texture of the dome with buttons. There would be like 10-20 texture options to choose from.

I have a bit of experience with HTML/CSS but not so much with javascript. So I'm a little bit out of my depth on that part.
I researched a bit and found the Sketchfab API Tutorial by @shaderbytes which seems to be pretty useful for someone knowing how to utilise it. :slight_smile:

Here is what I've got so far:

    <meta charset="UTF-8">
    <title>Sketchfab Viewer API example</title>

    <!-- Insert this script -->
    <script type="text/javascript" src=""></script>
    <script src="SketchfabAPIUtility.js"></script>
    <link rel="stylesheet" href="style.css">

    <!-- Insert an empty iframe -->
    <iframe src="" id="api-frame" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    <button class="switch" onclick="sketchfabAPIUtility.setTexture("Dome", sketchfabAPIUtility.AlbedoPBR, '');">Switch 1</button>

    <script type="text/javascript">
 function onSketchfabUtilityReady() {
     //your code here

 var sketchfabAPIUtility = new SketchfabAPIUtility('e20b521b20964d1893d09a7cc7c57889', document.getElementById('api-frame'), onSketchfabUtilityReady);


border: 0;

This is just a first try to change the texture of the dome to another texture. But it does not work. I am hoping that I just made a beginner mistake.
So if you know something, please let me know.

Thanks in advance!

(Shaderbytes) #2

can you provide a link to your example online? Is the domain CORS enabled? This is a requirement to be able to do texture injection.

(Nome Wiesbaden) #3

Wow, thanks for the quick reply!

I've tried it locally on my PC so far. So I just uploaded it to my dropbox public folder:

Hope this helps.

(Shaderbytes) #4

you have syntax error in your code for the button. for onclick=""

You cant use the " symbol in between the opening and closing of the on click if that is also using ". Use a single quote instead.

So the word Dome needs to be wrapped in single quotes

<button class="switch" onclick="sketchfabAPIUtility.setTexture('Dome', sketchfabAPIUtility.AlbedoPBR, '');">Switch 1</button>

But even if you fix that syntax error it will not work unless your domain is CORS enabled

(Nome Wiesbaden) #5

Thank you so much!

After tinkering around with it a little bit more, I've managed to get it to work close to what I had planed:
Codepen Example

Now there is only the viewer configuration left to do. I followed your tutorial to hide the ui_controls and so on. But I keep struggling with implementing the FPS Navigation and setting the FPS_Speed to 0.
I want the viewer to be able to just look around and not move at all. But when I add the "navigation:fps" argument to the code, the page just becomes white and does not show the iframe at all anymore. I thought this was another syntax error, but the other arguments worked just fine. :confused:

(Shaderbytes) #6

I just tested adding the params to your codepen and it works just fine.

var sketchfabAPIUtility = new SketchfabAPIUtility('e20b521b20964d1893d09a7cc7c57889', document.getElementById('api-frame'), onSketchfabUtilityReady, {navigation:"fps",fps_speed:0,ui_general_controls:0, ui_infos:0, camera:0, ui_stop:0});

(Nome Wiesbaden) #7

Man, I knew that it was just another small little thing! :grinning: Just these "" :joy:
Thank you so much again! You just made my day.