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:
HTML:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sketchfab Viewer API example</title>

    <!-- Insert this script -->
    <script type="text/javascript" src="https://static.sketchfab.com/api/sketchfab-viewer-1.0.0.js"></script>
    <script src="SketchfabAPIUtility.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- Insert an empty iframe -->
    <iframe src="" id="api-frame" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    <button class="switch" onclick="sketchfabAPIUtility.setTexture("Dome", sketchfabAPIUtility.AlbedoPBR, 'http://www.shaderbytes.co.za/sketchfab/development/api/examples/images/AlexVestin_Multicam.jpg');">Switch 1</button>
    


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

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

</script>
     
</body>
</html>

CSS:
body{
padding:0;
margin:0;
}
#api-frame{
width:100%;
height:75%;
border: 0;
display:block;
position:absolute;
}
.switch{
display:block;
left:50%;
top:80%;
position:absolute;
z-index:999;
}

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: https://dl.dropboxusercontent.com/u/88537913/Sketchfab_Switch/index.html

Hope this helps.
Thanks.


(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, 'http://www.shaderbytes.co.za/sketchfab/development/api/examples/images/AlexVestin_Multicam.jpg');">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.