Creating a mesmerizing display of moving cubes using three.js

Question

Creating a mesmerizing display of moving cubes using three.js

I am attempting to reproduce a specific effect showcased in the following link:

In my current project, I have multiple cubes positioned in 3D space along the x and z axis with loops. However, I am struggling to animate them in a precise order. My idea is to loop through the cubes and scale each one along its Y axis with different timing based on its position.

Furthermore, I believe I should utilize setInterval() to trigger the animation sequence, but I am unsure how to implement it...

Below is the code snippet I am using to loop through the boxes and perform scaling:

var r = -1;
(function f(){
    r = (r + 1) % cubes.length;
    cubes[r].scale.y += cubes[r].vy;
    if (cubes[r].scale.y >= 1.4) {
        cubes[r].vy *= -1;
}
setInterval(f, 200);

However, this code does not achieve the desired wavy, step-by-step scaling effect...

For reference, here is a link to the current version of my project: http://codepen.io/gbnikolov/pen/NPGqqq

javascript animation three.js

Answer 1

Answer №1

The animation demonstrated in the provided link showcases the propagation of a sine wave. To recreate this effect, you should adjust the scale of your cubes based on a sine wave function with time and space variables.

Let's start with the time aspect. It is advisable to approach each step separately to understand their contribution to the final outcome. The requestAnimationFrame callback requires a parameter representing the animation time. You can incorporate this into the cube height scale as follows:

function drawFrame(ts) {
    requestAnimationFrame(drawFrame);
    render.render(scene, camera);
    cubes.forEach(function(c) {
        c.scale.y = Math.sin(ts/500) + 1;
    });
}

By dividing the timestamp ts by 500, you can control the speed of the animation. Since the timestamp is in milliseconds, dividing by 500 ensures a complete cycle every 3.14 (pi) seconds. If you want it to last N seconds, divide by 500π and multiply by N.

To ensure all values are positive, we add 1 to the sine wave (since its normal range is [-1,1], adding 1 expands it to [0,2]).

You can introduce a "wave" by incorporating one of the dimensional components into the sine function. Let's begin with the x-dimension:

c.scale.y = Math.sin(ts/500 + c.position.x/4.95) + 1;

The value 4.95 was determined through trial and error; adjusting this number allows you to control the "resolution" of the wave. Higher values result in smoother waves.

Lastly, you can include the z-dimension:

c.scale.y = Math.sin(ts/500 + c.position.x/4.95 + c.position.z/12) + 1;

Similarly, adjusting the z-divider can help you achieve a visually appealing parameter.

You can view the modified CodePen implementation with this solution here:

http://codepen.io/anon/pen/JoYdGv

Answer 2

The animation demonstrated in the provided link showcases the propagation of a sine wave. To recreate this effect, you should adjust the scale of your cubes based on a sine wave function with time and space variables.

Let's start with the time aspect. It is advisable to approach each step separately to understand their contribution to the final outcome. The requestAnimationFrame callback requires a parameter representing the animation time. You can incorporate this into the cube height scale as follows:

function drawFrame(ts) {
    requestAnimationFrame(drawFrame);
    render.render(scene, camera);
    cubes.forEach(function(c) {
        c.scale.y = Math.sin(ts/500) + 1;
    });
}

By dividing the timestamp ts by 500, you can control the speed of the animation. Since the timestamp is in milliseconds, dividing by 500 ensures a complete cycle every 3.14 (pi) seconds. If you want it to last N seconds, divide by 500π and multiply by N.

To ensure all values are positive, we add 1 to the sine wave (since its normal range is [-1,1], adding 1 expands it to [0,2]).

You can introduce a "wave" by incorporating one of the dimensional components into the sine function. Let's begin with the x-dimension:

c.scale.y = Math.sin(ts/500 + c.position.x/4.95) + 1;

The value 4.95 was determined through trial and error; adjusting this number allows you to control the "resolution" of the wave. Higher values result in smoother waves.

Lastly, you can include the z-dimension:

c.scale.y = Math.sin(ts/500 + c.position.x/4.95 + c.position.z/12) + 1;

Similarly, adjusting the z-divider can help you achieve a visually appealing parameter.

You can view the modified CodePen implementation with this solution here:

http://codepen.io/anon/pen/JoYdGv

Creating a mesmerizing display of moving cubes using three.js

Answer №1

Similar questions

What is the best way to incorporate an npm module in a django-admin widget without the need to install node?

JavaScript Looping through multiple files for upload will return the last file in the series

What is the technique for causing this element to move in reverse?

What is the best way to utilize the history prop in conjunction with other props?

Once the content of a page is retrieved through an AJAX request, I am able to access and select tag elements, however, I am unable to

Intentionally introduce discrepancies in the errors during validation of an object using hapi/joi

The step-by-step guide to implementing async/await specifically for a 'for loop'

Changing the background color of a PHP input based on the webpage being viewed - here's how!

What is the best method for deleting a portion of a string following the final instance of a particular character?

Error: Although precheck is successful, the Chrome API Runtime has exceeded the QUOTA_BYTES_PER_ITEM quota

Is it possible to execute TypeScript class methods in asynchronous mode without causing the main thread to be blocked?

Using GraphicsMagick in combination with Node.js to upload a fresh image file to AWS S3: A step-by-step guide

Creating Transparent Rounded Backgrounds in Google Chrome Packaged Apps: Achieving the same look as Google Hangout app

How can you use Knex to order the results for each WHERE clause in a SELECT query?

Is there a way to update the color of a button once the correct answer is clicked? I'm specifically looking to implement this feature in PHP using CodeIgniter

The IDE is showing an error, but Jest is able to run it flawlessly

How to dynamically insert a hyperlink inside a <td> element within a table using JavaScript

Alternative solution to fix navigation issue in Flex 4.5 when navigatetoURL is not functioning as intended

Vue component doesn't update reactively until the template value changes

Expand the <div> by clicking on it, then hover away to return it to its normal size