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

【问题标题】：Three.js examples - how to approach themThree.js 示例 - 如何处理它们
【发布时间】：2018-07-24 19:05:31
【问题描述】：

我一直在学习 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/

【问题讨论】：

标签： javascript three.js webgl

【解决方案1】：

Scrolling is a browser event.

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

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

考虑以下 sn-p，其中超过某些阈值会更改按钮的背景颜色：

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);

&lt;input id="myButton" type="button" value="BUTTON!" /&gt;

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

【讨论】：

【解决方案2】：

对于动画，时间就是你所需要的。

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

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

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

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

【讨论】：