Exploring Three.js Demos: Strategies for Success

Question

Exploring Three.js Demos: Strategies for Success

Recently, I've delved into learning Three.js and stumbled upon some intriguing examples by Nat Geo. It got me thinking - is there a way to sync the animation progression with the scroll wheel? How did they seamlessly integrate WebGL elements with their website's design? In the first example, it appears that the webgl element is set in the background while regular HTML elements float over it. But the real puzzle lies in how they managed to time the animations so flawlessly.

If anyone has any insights or knowledge on the creation process of these fascinating visuals, I would greatly appreciate your input!

Check out the examples here: Nat Geo Example 1

And here as well: Nat Geo Example 2

javascript three.js webgl

Answer 1

Answer №1

Scrolling in a web browser is an interesting event.

Without delving into the specifics of the provided link, let's discuss a more generalized scenario.

Once you grasp the mechanics of this event, it becomes apparent that tracking the scroll distance on a page can be quite useful. Think of scroll distance as a trigger point, where reaching a certain point could prompt a specific action.

Imagine the following code snippet, which alters a button's background color based on different scroll thresholds:

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="PRESS ME!" />

Execute the code snippet and observe how hovering over the button while scrolling up or down triggers the color changes!

Answer 2

Scrolling in a web browser is an interesting event.

Without delving into the specifics of the provided link, let's discuss a more generalized scenario.

Once you grasp the mechanics of this event, it becomes apparent that tracking the scroll distance on a page can be quite useful. Think of scroll distance as a trigger point, where reaching a certain point could prompt a specific action.

Imagine the following code snippet, which alters a button's background color based on different scroll thresholds:

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="PRESS ME!" />

Execute the code snippet and observe how hovering over the button while scrolling up or down triggers the color changes!

Answer 3

Answer №2

When creating animations, having access to the time is crucial.

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

However, there's a workaround where you can use the scroll amount instead of real time. For example, if you want the full scroll of your screen to represent 7 seconds, you can incorporate this code snippet into your animation loop:

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

Take a look at this interactive demo for a better understanding: https://jsfiddle.net/m1a9qry6/23/

Answer 4

When creating animations, having access to the time is crucial.

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

However, there's a workaround where you can use the scroll amount instead of real time. For example, if you want the full scroll of your screen to represent 7 seconds, you can incorporate this code snippet into your animation loop:

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

Take a look at this interactive demo for a better understanding: https://jsfiddle.net/m1a9qry6/23/

Exploring Three.js Demos: Strategies for Success

Answer №1

Answer №2

Similar questions

Having trouble with jQuery.cookie saving my JSON data

What is the best location to initialize a fresh instance of the Firebase database?

click event on ion card

How can I incorporate a standalone Vuetify component into my Nuxt.js project?

Extract a value from a JSON array without using any predefined entities

Dealing with all errors across all pages in Angular using a comprehensive error handling approach

Tips for extracting HTML entities from a string without altering the HTML tags

Spin the object around the world's central axis

Switching ng-show value from separate controller

Region Covered by Mouse Over Does Not Extend Across Whole Div

Having trouble with Node.js, JQuery, and Express.js routes returning a 404 error. Need some assistance in troubleshooting. Any suggestions on what might be causing the issue?

Editing JSON files - Substitute the $scope object with a new value

Exploring scope in an angular service

Is there a way to consolidate my current scroll script into a single function?

Issue with scroll down button functionality not functioning as expected

Utilizing Webpack to Import GLB Models into Three.js

What is the best way to send information to a different webpage?

The resource was treated as an image but sent with the MIME type application/octet-stream

Leveraging kubectl.exe in conjunction with Docker and Node.js

Unable to open new window on iOS devices using $window.open