Questions about the annotations sync example

(Imgspc) #1

We're working on creating an interactive 3D floorplan that uses SketchFAB and sync's annotations to content on the same page.

I've downloads and modified the example. I've added more than 5 annotations, 8 in total. When I cycle thru the annotations it skips annotation-6. Does anyone know why this happens? Has anyone experienced this?

Can anyone give me an overview of how this project is setup.
* how's backbone used
* what's the function of sketchfab-viewer-1.0.0.js

How reliable is the annotation-sync example? Under what conditions will it fail?

Thanks in advance,


(Imgspc) #2

We tried to make our own annotation-sync example by adding a "click: event-listener to the annotation elements but failed (as others have) because the elements are in another domain (

We found a promising workaround but adding an event listener to for "annotationFocus" and then checking what the camera was looking at - there's a bug so the return index is not working.

   var iframe = document.getElementById( 'api-frame' );
   var version = '1.0.0';
   var urlid = 'd57bd1ad5c164b0fadfd1e573e6c76df';
   var client = new Sketchfab( version, iframe );

   client.init( urlid, {
       success: function onSuccess( api ){
           api.addEventListener( 'viewerready', function() {

               // API is ready to use
               // Insert your code here
               console.log( 'Viewer is ready' );
               api.addEventListener( 'annotationFocus', function( index ) {
                   // BUG: index not being returned.
                   //console.log( 'Reached annotation ' + index );
                   api.getCameraLookAt( function( err, camera ){
                       var camtarget =;
                       var strtarget = camtarget.toString();
                       var strsmall = strtarget.substr(0, 7);
                       if (strsmall == 69.3209){
                           $('#dynamic-content').html("D3 team section"); 
                       }else if(strsmall == 112.562){
                           $('#dynamic-content').html("Conference room");
                       }else if(strsmall == 45.1546){
                   } );
               } );

           } );
       error: function onError() {
           console.log( 'Viewer error' );
   } );

We still need to hide the viewer's navigation controls and rebuild our own so we can control syncing the SketchFAB viewer and the dynamic-content.

Anyone have a better way?


We're experiencing some bugs with both camera positions and the annotation event handlers. When they are fixed, the best way to do this is with the annotationBlur and annotationFocus events:

(Imgspc) #4

That's great to know, thanks

Will we get notifications when the annotation navigation buttons (precious & next) are pressed? At the moment we do not.

(Rob2) #5


Is the annotations sync example documented anywhere ? I'm trying to link the output from environmental sensors to models and this example looks like it could fulfil a lot of my requirements.

Thanks for any help


@imgspc - There's a bug in the annotationBlur and annotationFocus events. They don't currently pass the index of the annotation to the callback. This will be fixed ASAP.

@rob2 - You can see the source code here:

It's not actually using the annotation events. It's simply polling the camera location and triggers the DOM change if the camera/target match the annotation.

(Miekeroth) #7

It might be that it is already written somewhere, but how can I search for the positions of the annotations to be used in something like this but the other way around? Or can I just use the name of the annotations? I am looking for a way to add buttons that are linked to the annotations (and have additional information with it also, but the buttons are the main goal right now)



I'll take a look at the other thread you just started and answer there

(Fabbear) #9

hi, james, is it the only way which add annotation in the sketchfab editor.
we are working on one program need to let people add the annotations,we can not get the adding way in the api. is there some way?



It’s not possible yet to create annotations with the API, but it’s something we might add in the future.