The custom hotspot position is not animated when the panorama is moving

[alex-shevchuk]

Hello.

I want to display a frame for an object on the panorama and change its position and transformation via matrix3d ​​depending on the panorama position.
If I use viewer.setUpdate(true), then the frame does not move at all, and if without viewer.setUpdate, then the frame moves only after the movement is completed.
I can't use the custom hotspot from the examples because I want to apply matrix3d transformation.

What is the correct event to use for movement?
How to make a transformation with animation?

Here is an example of code:

const CONFIG = {
    default: {
        firstScene: '1',
        sceneFadeDuration: 1000,
        autoLoad: true,
        showControls: false,
        autoRotate: false,
        backgroundColor: [255, 255, 255],
        hotSpotDebug: true,
    },
    scenes: {
        '1': {
            hfov: 100.0,
            pitch: 0, 
            yaw: -43,
            type: 'multires',
            multiRes: {
                basePath: '/vt/output',
                path: '/%l/%s%y_%x',
                fallbackPath: '/fallback/%s',
                extension: 'jpg',
                tileResolution: 512,
                maxLevel: 4,
                cubeResolution: 3360
            },
        },
    }
};

viewer = pannellum.viewer('tour', VIEWER_SETTINGS);

const element = document.createElement('div');
element.classList.add('custom-hotspot');
const container = document.getElementsByClassName('pnlm-render-container');
container[0].append(element);

viewer.on('animatefinished', function () {
    const coord = [
        Math.floor(Math.random() * 100),
        -1 * (Math.floor(Math.random() * 400) + 200)
    ];

    const transform = 'translate(' + coord[0] + 'px, ' + coord[1] +
        'px) translateZ(9999px) rotate(0deg)';

    element.style.webkitTransform = transform;
    element.style.MozTransform = transform;
    element.style.transform = transform;

    viewer.setUpdate(true);
});

[mpetroff]

The viewer.setUpdate() method is for handling dynamic content as the panorama input. This is for supporting, e.g., <video> and <canvas> elements as input. This only works for equirectangular images, not multires like you're using, and it's irrelevant for anything that isn't the panorama image source, anyway.

then the frame moves only after the movement is completed

What did you expect was going to happen? The documentation for the animatefinished event states that it fires "when any movements / animations finish, i.e. when the renderer stops rendering new frames". As per the documentation, it fires when the movement stops, not during the movement.

If I use viewer.setUpdate(true), then the frame does not move at all

Normally, the viewer doesn't render new frames when there's no movement, since that would be wasteful as nothing is changing. To support dynamic content, the viewer has to render new frames even when the view is stationary. Since the viewer continues to render frames, the animatefinished event isn't fired. This is arguably a bug, since it breaks the intent of the event (although it's not relevant for what you're trying to do), but it is consistent with the documentation.

What is the correct event to use for movement?

There is currently no such event. This is tracked by #310 (comment), which I should really revisit at some point but have not gotten around to. There I discuss a render event, although it's probably better to also have a viewchanged event, to better handle the nuances of dynamic content.