Описание

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

Решение

В качестве главного инструмента была выбрана библиотека THREE.js, 3D сцены на основе рисунков и анимации подготовлены в Blender 3D.

Для создания иллюзии объема сцен был выбран метод параллакса, когда движение мыши пользователя меняет точку обзора камеры.

Был реализован алгоритм перемещения камеры между помещениями через двери на основе динамического сплайна, благодаря которому обеспечено плавное перемещение камеры из точки старта в точку финиша, задаваемых механикой параллакса.

Также были реализованы механики воспроизведения анимаций при наведении и клике, воспроизведение аудио- и видеоконтента.

Презентация проекта

Ссылки на примеры реализации