three.js — Анимация в вашей первой сцене — Урок № 4

Если вы когда-нибудь пытались сделать анимацию на языке java script, то наверняка сталкивались с функцией setInterval. С помощью метода setInterval (), мы можем определить функцию, которую, например,
можно было бы вызывать каждые 100 миллисекунд. Проблема в том, что setInterval () все равно , что происходит в браузере. Вы перешли на другую вкладку, а функция выполняется. Это может привести к увеличению загрузки процессора и плохой работы приложения в целом.

Введение в метод requestAnimationFrame()

Современные браузеры, к счастью, имеют решение для проблем, связанных с функцией setInterval — функцию requestAnimationFrame (). С помощью данной функции, вы можете указать функцию, которая вызывается через определенный промежуток времени. Функция, обрабатывает рендеринг как показано ниже:

function renderScene() {
 requestAnimationFrame(renderScene);
 renderer.render(scene, camera);
}

В функции renderScene (), мы называем метод requestAnimationFrame снова, чтобы сохранить анимацию того что происходит.

Собственно сам код:

function renderScene() {
stats.update();
// rotate the cube around its axes
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
cube.rotation.z += 0.02;

cube.position.x = 10+( 10*(Math.cos(step)));

cube.position.y = 2 +( 10*Math.abs(Math.sin(step)));

// bounce the sphere up and down

step+=0.04;

sphere.position.x = 20+( 10*(Math.cos(step)));

sphere.position.y = 2 +( 10*Math.abs(Math.sin(step)));

// render using requestAnimationFrame

requestAnimationFrame(renderScene);

renderer.render(scene, camera);
}

Здесь все как и в предыдущем примере, лишь добавлена функция function renderScene().

Вращение куба three.js — Анимация в вашей первой сцене

cube.rotation.x += 0.02;

cube.rotation.y += 0.02;

cube.rotation.z += 0.02;
function renderScene() {

stats.update();

// rotate the cube around its axes

cube.rotation.x += 0.02;

cube.rotation.y += 0.02;

cube.rotation.z += 0.02;

cube.position.x = 10+( 10*(Math.cos(step)));

cube.position.y = 2 +( 10*Math.abs(Math.sin(step)));

// bounce the sphere up and down

step+=0.04;

sphere.position.x = 20+( 10*(Math.cos(step)));

sphere.position.y = 2 +( 10*Math.abs(Math.sin(step)));

// render using requestAnimationFrame

requestAnimationFrame(renderScene);

renderer.render(scene, camera);
}

Вращение куба three.js — Анимация в вашей первой сцене

cube.rotation.x += 0.02;

cube.rotation.y += 0.02;

cube.rotation.z += 0.02;

С помощью свойства rotation мы можем вращать объект в сцене, и так как эти строки вызываются каждую секунду, наш куб будет вращаться каждую секунду на 0.02 по осям XYZ.

Затем далее я добавил «прыжки куба»

cube.position.x = 10+( 10*(Math.cos(step)));
cube.position.y = 2 +( 10*Math.abs(Math.sin(step)));

Здесь все немного интереснее. Т.к. renderScene() и все что в ней вызывается каждую секунду, мы можем не только вращать, но и двигать объекты, добавив кроме свойства rotate свойство position.

Функции ( 10*(Math.cos(step)) нужны лишь для плавности перемещений. Но как объекты вовращаются на свои места обратно — за это отвечает переменная step, можете попробовать в примере выставить там 0. Объекты не будут двигаться.
Все дело в том, что переменная step изначально равна 0. При работе функции она становится 0+0.04, а после того как функция отработала — снова 0.

// Функция initStats отображает статистиу отрисовки холста в FPS.
 function initStats() {
            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms
            // Align top-left

            stats.domElement.style.position = "absolute";
            stats.domElement.style.left = "0px";
            stats.domElement.style.top = "0px";
            document.getElementById("Stats-output").appendChild( stats.domElement );
            return stats;
        }
    };