Как обновить изображение на canvas, отрисованном через Three.js?

Question

Ситуация очень хитрая для меня и, возможно, заголовок не отражает сути, простите, я просто не разбираюсь в js.

Понадобилось мне сделать рендер скина игрока Minecraft, ну и нашел я js-библиотеку skinview3d. Как я понял, она использует библиотеку Three, тут без вопросов.

Модельку со скином я отрисовал и все работает:

let skinViewer = new skinview3d.SkinViewer({
        domElement: document.getElementById("skin"),
        width: 200,
        height: 200,
        skinUrl: 'URL'
    });

Далее мне нужно обновить скин на сервере, это я делаю отправкой формы с файлом через fetch, назад получаю новый url со скином (это png файл).

В skinViewer можно указать этот новый url так:

skinViewer.skinUrl = url;

Но это не обновляет уже отрисованный canvas с моделькой игрока, а skinViewer не содержит никаких методов для этого. Чтобы все перерисовалось, приходится перезагружать страницу, но это не подходит.

Как мне все же перерисовать этот canvas без перезагрузки страницы?

А ну и ссылка на skinview3d

Answer 1

Проблема оказалась главным образом в том, что у меня изображение кешировалось браузером (путь меняется редко). Костыльное решение: добавлять к url случайный параметр вроде ?rand=58388. Ну а перерисовку canvas делаю его удалением через skinViewer.dispose(); и новым добавлением.

БЛОГ НА HUSL

Как обновить изображение на canvas, отрисованном через Three.js?

Ответы (1 шт):