Ability for User to Add Annotation

I am trying to create a viewer where my students can add their own annotations to models as a class project for the end of the summer semester. I am a Javascript novice and have tried to piece together elements from the API Viewer and other answers that I have found on the forum. So far, I am unable to register any click events to the console or add annotations to a model. Any advice? Please find my code below. Thank you for any help.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sketchfab Viewer API example</title>

    <!-- Insert this script -->
    <script type="text/javascript" src="https://static.sketchfab.com/api/sketchfab-viewer-1.7.1.js"></script>
</head>

<body>
    <!-- Insert an empty iframe -->
    <iframe src="" id="api-frame" allow="autoplay; fullscreen; vr" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

    <!-- Initialize the viewer -->
    <script type="text/javascript">
    var iframe = document.getElementById( 'api-frame' );
    var uid = '7w7pAfrCfjovwykkEeRFLGw5SXS';

    // By default, the latest version of the viewer API will be used.
    var client = new Sketchfab( iframe );

    // Alternatively, you can request a specific version.
    // var client = new Sketchfab( '1.7.1', iframe );

    client.init( uid, {
        success: function onSuccess( api ){
            api.start();
            api.addEventListener( 'viewerready', function() {

                function clickListener(api) {
                    api.addEventListener(
                        'click',
                        function (info) {
                            if (info.instanceID) {
                                api.getCameraLookAt(function (err, camera) {
                                    createAnnotation(api, camera, info.position3D, "test", "test");
                                });
                            }
                        },
                        { pick: 'slow' }
                    );
                }

                function createAnnotation(api, camera, positionEnd, title, subtitle) {
                    api.createAnnotation(
                        camera.position,
                        positionEnd,
                        camera.position,
                        camera.target,
                        title,
                        subtitle
                    );
                }
                
                console.log( 'Viewer is ready' );
            } );
        },
        error: function onError() {
            console.log( 'Viewer error' );
        }
    } );
    </script>
</body>
</html>

Hi,

You are nearly there, you really just need to call your “clickListener” function you created if you want the click event listener to be added to the api. (you just “defined” clickListener, current code didn’t call it once defined)

Made you a quick fiddle in case it’s not clear:
https://jsfiddle.net/sketchfab/x4ocvwqn/

2 Likes

Thank you so much!

1 Like

A quick followup if it’s easy to answer. When someone adds an annotation, where does that annotation live in the DOM? I am looking for it using ‘inspect element’ but can’t find it. I am trying to come up with a way for students to save the HTML and JavaScript and send me the file to view their annotations.

No, it doesn’t live in the DOM.

What you need is to save all annotation data in an javascript object,
and then print it in the console.

here’s some code that does that
https://jsfiddle.net/sketchfab/fp9ybktL/

“annotations” is the object to save/load
Only thing missing is how to copy/paste the data from student into the annotation object.
As a teacher would say, “exercise is left to the reader” :slight_smile:

2 Likes

Thank you again, Paul. You have given me more than enough to play with to get the functionality I need. I really appreciate it!