Javascript 三个.js示例-如何接近它们

我一直在学习Three.js，我遇到了Nat Geo的这些例子。我想知道是否有人知道如何使滚轮控制动画的进程，以及它是如何与他们网站的常规外观混合的。。。在第一个示例中，webgl元素似乎位于背景中，普通html元素漂浮在其上，但我不明白他们是如何将动画计时到它的

如果有人知道这些是如何创造的，我将不胜感激

我并没有具体地看链接页面，相反，我将描述一个更通用的场景

一旦您了解了事件的工作原理，就很容易看到您可以跟踪自己在当前页面上滚动了多远。将滚动距离视为一种触发器，一旦通过距离X，就会发生特定的事情

考虑下面的代码段，其中跨越某些阈值会更改按钮的背景颜色：

var button=document.getElementByIdmyButton； var位置=0； 功能卷轴手柄{ e、 防止违约； 如果e.wheelDeltaY>0 | |位置！==0{ 位置+=e.车轮三角座； } 控制台。日志位置； 如果位置<500{ button.style.background=； } 如果位置>500{ button.style.background=红色； } 如果位置>1000{ button.style.background=绿色； } } button.addEventListenermousewheel，scrollHandler； button.AddEventListenerDomainMouseScroll，scrollHandler； 对于动画，时间是您所需要的

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

但是你可以作弊，用滚动的数量来代替实时。 例如，如果需要屏幕的完整滚动表示7秒，可以在动画循环中使用以下代码：

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

下面是一个活生生的例子：