How do I use regular api event with the apiUtility?


(Remibathalon) #1

I would like to use the annotationFocus event in order to do something like the annotation sync example but the javascript structure of this example is really different from most of your tutorial and documentation.

Whats the best way to port that example with a viewer spawned with the API Utility?

I tried to just use a basic console log but I get this error, "Uncaught ReferenceError: api is not defined"
Here's my code:

	function onSketchfabUtilityReady() {
	//your code here

	api.addEventListener( 'annotationFocus', function( index ) {
	console.log( 'Reached annotation ' + index );
	} );
        $("#variation_1").on("click", function (event) {
            sketchfabAPIUtility.resetColor("bain exterieur", sketchfabAPIUtility.AlbedoPBR);
var sketchfabAPIUtility = new SketchfabAPIUtility(urlid, document.getElementById('api-frame'), onSketchfabUtilityReady, {
autostart: 1,
autospin: 0.1,

I'm not a programmer by any means so any help and tips is greatly appreciated.
Thanks in advance.


Sounds like you haven't declared the api object anywhere, or not in the right scope. Are you also combining the regular API with @shaderbytes's utility?

Can you post the full script?

(Remibathalon) #3

Yes, I'm using @shaderbytes's utility.
Usually this is all the code I need to spawn the viewer and use some of the utility's functions.

var urlid = 'f3558e6a1dd548bd8c73dcbdd2c753c0';

function onSketchfabUtilityReady() {

$('#annotation_1').on('click', function(event) {

$('#annotation_2').on('click', function(event) {

$('#annotation_3').on('click', function(event) {

$('#annotation_4').on('click', function(event) {

var sketchfabAPIUtility = new SketchfabAPIUtility(urlid, document['getElementById']('api-frame'), onSketchfabUtilityReady, {
autostart: 1,
autospin: 0,
preload: 1

In my html I just link the three following script at the bottom of my body content

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/SketchfabAPIUtility.js"></script>
<script type="text/javascript" src="js/CustomScript.js"></script> "this is the above"

On the Tutorial: Sketchfab API Utility, @shaderbytes says :

The utility only abstracts functionality that is possible within the Sketchfab Viewer API Itself. I have not created an abstraction for every API function, only those where it made sense to do so. However, since the Sketchfab Viewer API object is stored within the utility itself, if you do want to call any functions on it directly you can. The property name for this is “api”.

But he doesn't go in more detail as to how to integrate regular API function in his structure.


Sounds like you can do:

sketchfabAPIUtility.api.addEventListener('annotationFocus', function(index) {
    console.log('Reached annotation ' + index);

(Remibathalon) #5

Yes, I managed to make it work. I was able to simplify the annotation sync thanks to that.
Thanks again!