Примеры Three.js - как к ним подойти - PullRequest
Новая
       5

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

0 голосов
/ 24 мая 2018

Я изучал Three.js и наткнулся на эти примеры Ната Гео.Мне было интересно, знает ли кто-нибудь, как заставить колесо прокрутки управлять ходом анимации и как оно смешивается с обычным внешним видом их сайта ... Кажется, что в первом примере элемент webgl находится в фоновом режиме с обычным HTMLэлементы, плавающие над ним, но я не понимаю, как они синхронизировали анимацию.

Если у кого-то есть понимание того, как они были созданы, я буду признателен за это!

https://www.nationalgeographic.com/science/2017/09/cassini-saturn-nasa-3d-grand-tour/#enceladus

https://www.nationalgeographic.com/science/2016/11/exploring-mars-map-panorama-pictures/

Ответы [ 2 ]

0 голосов
/ 24 июля 2018

Для анимации, время - это то, что вам нужно. 

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

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

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

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

0 голосов
/ 24 мая 2018

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

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

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

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

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

function scrollHandler(e) {
  e.preventDefault();
  if (e.wheelDeltaY > 0 || position !== 0) {
    position += e.wheelDeltaY;
  }
  console.log(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!" />

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

...