Примеры Three.js - как к ним подойти

Прокрутка - это событие браузера.

Я специально не просматривал связанные страницы, вместо этого я опишу более общий сценарий.

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

Рассмотрим приведенный ниже фрагмент, в котором пересечение определенных пороговых значений меняет цвет фона кнопки:

var button = document.getElementById("myButton");
var position = 0;

function scrollHandler(e) {
  e.preventDefault();
  if (e.wheelDeltaY > 0 || position !== 0) {
    position += e.wheelDeltaY;
  }
  console.info(position);
  if (position < 500) {
    button.style.background = "";
  }
  if (position > 500) {
    button.style.background = "red";
  }
  if (position > 1000) {
    button.style.background = "green";
  }
}

button.addEventListener("mousewheel", scrollHandler);
button.addEventListener("DOMMouseScroll", scrollHandler);

<input id = "myButton" type = "button" value = "BUTTON!" />

Запустите фрагмент кода, затем наведите указатель мыши на кнопку и прокрутите вверх / вниз.

Для анимации вам нужен время.

var uniTime = gl.getUniformLocation( prg, "uniTime" );
gl.uniform1f( uniTime, time );

Но вы можете обмануть и использовать количество прокрутки вместо реального времени. Например, если вам нужно, чтобы полная прокрутка экрана составляла 7 секунд, вы можете использовать этот фрагмент кода в цикле анимации:

time = 7000 * screen.scrollTop / screen.scrollHeight;

Вот живой пример: https://jsfiddle.net/m1a9qry6/23/