Skip to content

Instantly share code, notes, and snippets.

@pimpelsang
Last active October 30, 2021 19:46
Show Gist options
  • Select an option

  • Save pimpelsang/6afe5c45e46aad6160c67c205db6ad49 to your computer and use it in GitHub Desktop.

Select an option

Save pimpelsang/6afe5c45e46aad6160c67c205db6ad49 to your computer and use it in GitHub Desktop.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sketchfab Viewer API example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.6.1/gl-matrix-min.js" integrity="sha512-5gjtrbkSzY8jdrVyMSiXO+0AERPMGYpUueFLkBMITgfPL+2qAfZnQyW2YWJkXS4ELmFJLhDZu1WbK8UKFjmC/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://static.sketchfab.com/api/sketchfab-viewer-1.10.1.js"></script>
<style>
body {
margin: 0;
}
iframe {
display: block;
background: #000;
border: none;
height: 100vh;
width: 100vw;
}
#controls {
position: fixed;
width: 200px;
top: 30px;
right: 10px;
}
button {
height: 30px;
font-size: 20px;
}
</style>
</head>
<body style="">
<iframe src="" width="100%" height="100%" id="api-frame" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<div id="controls">
<button>talv</button>
<button>kevad</button>
<button>suvi</button>
<input type="range" min="1" max="24" value="12" id="time">
</div>
<script type="text/javascript">
var iframe = document.getElementById( 'api-frame' );
var uid = 'a2dd37cdb0664d37bae8a1c1f25ee731';
var client = new Sketchfab( iframe );
var API, sun;
client.init( uid, {
success: function onSuccess( api ){
api.start();
API = api;
api.addEventListener( 'viewerready', function() {
// API is ready to use
// Insert your code here
api.getLight(0, (err, light) => {
sun = light;
})
} );
},
error: function onError() {
console.log( 'Viewer error' );
}
} );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment