Building Interface that Allows you to Click to Add Annotations on Model

I am currently trying to implement ‘click to add annotation’ functionality, but sometimes, if the user clicks on the model, it doesn’t end up actually adding the annotation.

function init() {
    uid = "dd8399601d1b4fc189bc6e1cd1d611bb";

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

    client.init(uid, {
        success: function onSuccess(api) {
            api.start();
            clickListener(api);
        },
        error: function onError() {
            console.log('Viewer error');
        },
        autostart: 1,
        preload: 1,
        transparent: 1,
        ui_stop: 0
    });
}

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

function createAnnotation(api, camera, positionEnd, title, subtitle) {
    api.createAnnotation(
        camera.position,
        positionEnd,
        camera.position,
        camera.target,
        title,
        subtitle
    );
}

I have attached a GIF illustrating this issue. As you can see it took me 3 tries to even add annotation #9, while others added consistently. Does anyone have any ideas as to why it’s so finicky?

We do no send click event if the user is rotating the model even a little bit, I think you might fall on the “rotate” detector here

Hi Paul,

Initially this was my intuition as well, but I ended up adding a console.log(“click”) in the listener function to see if that was the case, but I don’t think it is.

Take a look at this: https://i.imgur.com/nUVIFHi.gifv

The first time it actually senses the click, but fails to add the annotation.

Has anyone been able to figure out what could’ve been the issue with my updated demo?

Can you try switching to { pick : 'slow' } ?