Анимация движения на AR.js

Краткая инструкция

Здравствуйте, дорогие читатели! Сегодня мы будем работать над тем, чтобы сделать нашу модель более динамичной. Мы добавим ей возможность двигаться по кривой.

Итак, план действий следующий:

1. Меняем модель
2. Меняем размеры
3. Добавляем движения

Всё просто. Поехали! 🚀

1. Смена модели

Прежде всего, мы заменим модель шлема на более подходящую для данного урока — модель утки. Для этого нужно лишь изменить ссылку. gltf-model="https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf"

2. Изменение размеров

Теперь мы немного уменьшим размер, так как утка была слишком большой, что мешало обзору. scale="0.4 0.4 0.4"

3. Добавляем движение

Теперь, самое важное — мы сделаем так, чтобы она плавала по кругу. Для этого нам потребуется написать небольшой фрагмент JavaScript-кода, мы же всё-таки работаем с библиотекой AR.js.

Вот код, который нам нужно разместить в теге script, обязательно после AR-кода, иначе он не будет работать. Это важно, потому что запуск анимации объекта происходит после его появления на экране, и если разместить код до этого момента, анимация, конечно, не будет применена к нему.

                                            
<script>
    const model = document.getElementById('rotating-model');
    let angle = 0;

    function animate() {
        // Скорость вращения
        angle += 0.02; 
        // Координаты орбиты
        model.object3D.position.x = Math.cos(angle) * 1; // Радиус орбиты
        model.object3D.position.z = Math.sin(angle) * 1; // Радиус орбиты
        
        requestAnimationFrame(animate);
    }

    animate();
</script>
                                            
                                        

А вот объяснение того, что делает этот код:

В первой строке мы сохраняем нашу модель в переменную. Это позволит нам применить к ней всю анимацию. Мы используем метод getElementById, чтобы найти модель в коде по её уникальному идентификатору.

Чтобы это работало, нам нужно добавить атрибут id="rotating-model" рядом с атрибутами a-entity, чтобы наш код выглядел так: <a-entity id="rotating-model"></a-entity>.

Обратите внимание, что для решения нашей задачи атрибут position не нужен, поэтому его можно удалить.

Теперь давайте вкратце рассмотрим, что происходит в оставшихся строках кода:

• let angle = 0; Инициализация переменной , которая будет хранить текущий угол вращения модели. Начальное значение равно 0 радиан.

• function animate(); Объявление функции, которая будет отвечать за анимацию модели. Эта функция будет вызываться многократно с помощью метода requestAnimationFrame.

• angle += 0.02; Увеличение угла вращения на 0.02 радиана при каждом вызове функции. Это определяет скорость вращения модели.

• model.object3D.position.x = Math.cos(angle) * 1; Вычисление новой позиции по оси X для модели. Функция Math.cos(angle) используется для определения X-координаты, что позволяет разместить модель на круговой орбите с радиусом 1.

• model.object3D.position.z = Math.sin(angle) * 1; Рассчитывание новой позиции по оси Z. Функция Math.sin(angle) служит для определения Z-координаты, что обеспечивает плавную и округлую траекторию вращения.

• requestAnimationFrame(animate); Вызов функции requestAnimationFrame, чтобы продолжить анимацию. Это обеспечивает плавность за счет запроса следующего кадра, где функция animate будет вызвана снова.

• animate(); Первая инициализация анимации. После определения функции animate, мы вызываем ее, чтобы запустить процесс вращения модели.

Таким образом, данный код обеспечивает плавное вращение 3D-модели вокруг центра по круговой траектории с фиксированным радиусом.