Question

我一直在学习Three.js，我遇到了Nat Geo的这些例子。我想知道是否有人知道如何使滚轮控制动画的进展以及它如何与他们的网站的常规外观混合...似乎在第一个例子中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/

Answer 1

Scrolling is a browser event

我没有专门查看链接页面，而是我将描述一个更通用的场景。

一旦了解了事件的工作原理，就可以很容易地看到一个人可以跟踪当前页面上滚动的距离。将滚动距离看作一种触发器，一旦你通过距离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!" />

运行代码段，然后将鼠标悬停在按钮上并向上/向下滚动。

Answer 2

对于动画，您需要时间。

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

但是您可以作弊并使用滚动量代替实时。例如，如果您需要屏幕的整个滚动显示7秒，则可以在动画循环中使用以下代码：

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

这是一个生动的例子：https://jsfiddle.net/m1a9qry6/23/

Three.js示例 - 如何处理它们

2 个答案: