// Sketchfab Viewer API: Annotation hit also picks mesh
const version = '1.10.1';
const uid = '7c821f28776448d1a69ba852ac373903';
const iframe = document.getElementById('api-frame');
const client = new window.Sketchfab(version, iframe);
let api;
const error = err => console.error('Sketchfab API error:', err);
var titleMessageElement;
var audioSample1;
var audioPlaying1;
function toggleAudio1() {
if (!audioSample1) return;
audioSample1.loop = false;
if (audioPlaying1) audioSample1.pause();
else audioSample1.play().then(function() {
window.console.log("// Automatic playback started!");
titleMessageElement.textContent = "// Automatic playback started!";
}).catch(function(error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
window.console.log("// Automatic playback couldn't start!");
window.console.log(error);
titleMessageElement.textContent = "// Automatic playback couldn't start! need user interaction";
});
}
function skfbStart() {
const success = apiClient => {
api = apiClient;
api.start();
api.addEventListener('viewerready', () => {
toggleAudio1();
});
};
client.init(uid, {
annotation: 0, // Usage: Setting to [1 – 100] will automatically load that annotation when the viewer starts.
annotations_visible: 1, // Usage: Setting to 0 will hide annotations by default.
autospin: 0, // Usage: Setting to any other number will cause the model to automatically spin around the z-axis after loading.
autostart: 1, // Usage: Setting to 1 will make the model load immediately once the page is ready, rather than waiting for a user to click the Play button.
cardboard: 0, // Usage: Start the viewer in stereoscopic VR Mode built for Google Cardboard and similar devices.
camera: 1, // Usage: Setting to 0 will skip the initial animation that occurs when a model is loaded, and immediately show the model in its default position.
preload: 1, // Usage: Setting to 1 will force all resources (textures) to download before the scene is displayed.
ui_stop: 0, // Usage: Setting to 0 will hide the "Disable Viewer" button in the top right so that users cannot stop the 3D render once it is started.
transparent: 0, // Usage: Setting to 1 will make the model's background transparent
ui_animations: 0, // Usage: Setting to 0 will hide the animation menu and timeline.
ui_annotations: 0, // Usage: Setting to 0 will hide the Annotation menu.
ui_controls: 1, // Usage: Setting to 0 will hide all the viewer controls at the bottom of the viewer (Help, Settings, Inspector, VR, Fullscreen, Annotations, and Animations).
ui_fullscreen: 1, // Usage: Setting to 0 will hide the Fullscreen button.
ui_general_controls: 1, // Usage: Setting to 0 will hide main control buttons in the bottom right of the viewer (Help, Settings, Inspector, VR, Fullscreen).
ui_help: 1, // Usage: Setting to 0 will hide the Help button.
ui_hint: 1, // Usage: Setting to 0 will always hide the viewer hint animation ("click & hold to rotate"). Setting to 1 will show the hint the first time per browser session (using a cookie). Setting to 2 will always show the hint.
ui_infos: 0, // Usage: Setting to 0 will hide the model info bar at the top of the viewer.
ui_inspector: 0, // Usage: Setting to 0 will hide the inspector button.
ui_settings: 0, // Usage: Setting to 0 will hide the Settings button.
ui_vr: 0, // Usage: Setting to 0 will hide the View in VR button.
ui_ar: 0, // Usage: Setting to 0 will hide the View in AR button.
ui_watermark_link: 0, // Usage: Setting to 0 remove the link from the Sketchfab logo watermark.
ui_color: '00a8c0', // Usage: Setting to a hexidecimal color code (without the #) or a HTML color name will change the color of the viewer loading bar.
ui_watermark: 0, // Usage: Setting to 0 remove the Sketchfab logo watermark.
success: success,
error: error,
version: version
});
}
document.addEventListener("DOMContentLoaded", function(event) {
console.log("loaded");
document.addEventListener("click", function(event) {
console.log("user interactions");
document.getElementById("clicker").style.display = "none";
// sound can be paused by user, browser, only way to know is to listen
// to the events
audioSample1 = document.getElementById('audio1');
audioSample1.addEventListener("playing", function(event) {
audioPlaying1 = true;
});
audioSample1.addEventListener("pause", function(event) {
audioPlaying1 = false;
});
titleMessageElement= document.getElementById('title');
skfbStart();
});
});
<!-- Learn about this code on sketchfab: https://sketchfab.com/developers/viewer -->
<div class="container">
<div id="clicker">click me</div>
<div class="iframe-container">
<iframe src="" id="api-frame"></iframe>
</div>
<p id="title" style="color: red"></p>
<p>Sound plays on load, if not, <a href="https://developers.google.com/web/updates/2018/11/web-audio-autoplay"> it means it needs a "user click/touch permission"</a></p>
</div>
<audio controls id="audio1" loop=false preload width="960" height="540">
<source src="https://sketchfab.com/blogs/community/wp-content/uploads/2021/10/sample-1.m4a" id="srcMP3" type="audio/mp3">
<div>Your Browser will not support this audio</div>
</audio>
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;
}
.controls {
display: flex;
align-items: center;
flex-wrap: wrap;
flex-shrink: 0;
min-height: 50px;
padding: 15px 0 0 15px;
background-color: #F2F2F2;
border-top: 1px solid #e7e7e7;
}
.controls > * {
margin-right: 15px;
margin-bottom: 15px;
}
button {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: 2px solid transparent;
border-radius: 4px;
padding: 0 13px;
font-family: "Open Sans", sans-serif;
font-weight: 600;
text-align: center;
text-shadow: none;
text-transform: uppercase;
line-height: 1.2;
cursor: pointer;
outline: none;
transition: background 0.2s;
color: white;
background-color: #1caad9;
height: 25px;
font-size: 12px;
}
button.disabled {
background-color: #cccccc;
}
External resources loaded into this fiddle: