three.js
Render Loops for Animation: динамическое обновление объектов

В этом документе описаны некоторые распространенные способы добавления анимации непосредственно в ваши сцены Three.js. Хотя есть библиотеки и фреймворки, которые могут добавить динамическое перемещение к вашей сцене (твины, физика и т. Д.), Полезно понять, как вы можете сделать это сами, просто несколькими строками кода.

Основная концепция анимации - обновление свойств объекта (ротация и перевод, как правило) в небольших количествах в течение определенного периода времени. Например, если вы переведете объект, увеличив положение X на 0,1 каждую десятую секунды, это будет 1 единица дальше по оси X за 1 секунду, но зритель воспримет ее как плавно перемещенную в эту позицию по сравнению с этим вместо того, чтобы прыгать прямо в новую позицию.

Чтобы помочь нам, мы создаем цикл рендеринга в скрипте.

var render = function () {
    requestAnimationFrame( render );
    //update some properties here
    renderer.render(scene, camera);
}

В приведенном выше примере вращающегося куба мы используем эту идею - небольшие инкрементные обновления - чтобы изменить поворот куба каждый раз, когда запрашивается новый кадр анимации. Увеличивая свойства rotation.x и rotation.y объекта cube на каждом кадре, куб, похоже, вращается по этим двум осям.

В качестве другого примера нередко можно разделить необходимое обновление на другие функции, где вы можете выполнять дополнительные вычисления и проверки, сохраняя замкнутый цикл визуализации. Например, цикл визуализации ниже вызывает четыре различные функции обновления, каждая из которых предназначена для обновления отдельного объекта (или массива объектов, в случае updatePoints() ) в сцене.

//render loop
function render() {
    requestAnimationFrame( render );
    updateGrid();
    updateCube();
    updateCamera();
    updatePoints(pList);
    renderer.render( scene, camera);
}
render();

Вы можете заметить в примерах онлайн, что элементы управления камерой также являются частью цикла визуализации.

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
controls.autoRotate = true;

var render = function () {
    requestAnimationFrame( render );
    controls.update();
    renderer.render(scene, camera);
};

Это связано с тем, что скрипт для управления камерой выполняет одно и то же; обновляя его с течением времени. Изменения могут быть вызваны пользовательским вводом, таким как позиция мыши, или что-то программное, например, по пути. В любом случае, мы просто анимируем камеру.

var scene = new THREE.Scene();  
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

//Create an render loop to allow animation
var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;

    renderer.render(scene, camera);
};

render();