Generating animated particles using three.js

I'm diving into the world of three.js and have managed to create a basic particle app using it. However, I've noticed that the particles flow from the center, but I'd like them to move in a direction similar to what's shown in the screenshot attached (top right corner to bottom left corner). You can find the code I'm working on at . Any references or tips on achieving this particle flow would be greatly appreciated. Thank you.

https://i.sstatic.net/JBf7N.jpg

Answer №1

It appears that your updateParticles function is currently only adjusting the z position of the particles:

particle.position.z +=  mouseY * 0.1;
if(particle.position.z>1000) particle.position.z-=2000; 

To move the particles both vertically and horizontally, you will need to update the x and y positions as well.

particle.position.x -=  mouseY * 0.1;
particle.position.y -=  mouseY * 0.1;
if(particle.position.x<-500) particle.position.x+=1000;
if(particle.position.y<-500) particle.position.y+=1000;

Keep in mind that the size of your scene may require some adjustments to these values.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An issue occurred during rendering: `TypeError: Unable to retrieve the length property of an undefined value`

I want to display an overlay only when there is text in my search input. Below is the template for my input field: Input.vue: <template> <div> <input v-model="query" class="input" placeholder="Global search..."></input&g ...

What is the best way to split a single column into two using blocks?

I am working with a container that currently has all its blocks lined up in a column. I need to divide them into two columns, with 5 blocks in each. Unfortunately, the plugin I am using generates the code for me and does not allow me to insert my own div e ...

Using Selenium to determine the quantity of elements that have a similar class present

Here is the test code I am using: it('count elements by class', async t => { let count = await driver.findElements(By.css('my-questions-class')).then(v => v.length); assert.equal(count, 3); // The count should b ...

Should you opt for returning [something] or (nothing) in Javascript with ExpressJS?

Is there a distinct contrast between returning something and returning nothing? Let's take a look at an example: user.save(function(err){ if ( err && err.code !== 11000 ) { console.log(err); console.log(err.code); res.send(&apo ...

Navigate to a specific div with its id in ReactJS without relying on external libraries

Is it possible to scroll to a specific div using an ID in React without relying on external libraries? I've come across some solutions that involve scroll libraries. Below is the code for the div within my WrappedQuestionFormFinal component: <div ...

Unsure if values can be imported from one component to another in Vue.js using props

Currently experimenting with Vue and ran into a minor challenge - wondering if there's a solution to this. I am looking to add a new value to my items array using my Button component so that I can display it using v-for. While consolidating everything ...

Is the callback still triggered even after the off function is called?

Can someone help me with a scenario where despite calling the off on a reference, the callbacks are still being triggered repeatedly? var ref = new Firebase('https://example.firebaseio.com/123456'); for (var n = 0; n < 1024; ++n) { ref.pus ...

Is it possible to display partial html templates by accessing the local url and blending them with the main index.html file?

Is there a way to view partial HTML templates locally without copying them into the main index.html file? I'm looking for a solution that allows me to access my partial templates through a local URL without having to manually paste them into the main ...

Having trouble with updating your website asynchronously through code? In need of a detailed explanation?

Here are two Javascript functions that are used to call a python file in order to update an HTML page. The first function works perfectly fine, but the second one seems to be malfunctioning without throwing any errors. function button(key) { var xhttp ...

The functionality of Inettuts within JavaScript seems to malfunction whenever I attempt to reposition the div

I developed a widget framework using inettuts and integrated database functionalities with ajax in asp.net and sqlserver. Widgets are dynamically loaded based on user data from the database, but I encountered an issue when trying to move a widget - the J ...

There has been an issue with parsing the JSON file due to an invalid character found at

I keep encountering a parse error whenever I attempt to send a post request to the server. $.post("../php/user_handler.php", formData, function(data) { var result = JSON.parse(data); if(result.status === 'error') { ...

Issue with PrimeFaces radiobutton styles not updating after being clicked programmatically

My setup includes a p:selectOneRadio constructed like this: <p:selectOneRadio id="positionRadio" value="#{employeeBean.empPosition}" converter="#{empPositionConverter}" layout="custom" required="true" requiredMessage="Please select ...

Is it possible to achieve this using an alternate method such as CSS?

Currently, I am working on a function that will apply shadow effects to all buttons within a specific class when hovered over. However, due to the dynamic nature of the buttons created based on the data retrieved from the database, assigning individual IDs ...

Monitoring the inclusion of a new item within the database

I am utilizing a Firebase Realtime Database where users have the ability to perform the following actions: add an item to the database update an item in the database Currently, I have a function that monitors a specific location within the database. ...

Troubleshooting problem with Ajax responseText

Can an ajax responseText be received without replacing the existing content? For instance: <div id="content"> <p>Original content</p> </div> Typically, after running an ajax request with a responseText that targets id="conten ...

Exploring the functionality of placeholders within jQuery

I am trying to create a customizable text template where I can insert placeholders and then fill those placeholders with data to use on my page. For example: var template = '<div class="persons">'; template += '<p> <span clas ...

Formik's handleChange function is causing an error stating "TypeError: null is not an object (evaluating '_a.type')" specifically when used in conjunction with the onChange event in DateInput

When using the handleChange function from Formik with the DateInput component in "semantic-ui-calendar-react", I encountered an error upon selecting a date. https://i.stack.imgur.com/l56hP.jpg shows the console output related to the error. AddWishlistFor ...

Are there alternative methods for retrieving data in Vue Hacker News besides using prefetching?

I am currently developing a Vue single page application with server side rendering using Vue SSR. As per the official documentation, data in components will be prefetched server-side and stored in a Vuex store. This process seems quite intricate. Hence, ...

Tips for adjusting the margin of a print document in a printTask?

Is there a way to achieve a borderless print? Currently, my printed output has a border around it. I would like the image to start at the top left corner without any borders. I attempted to set a negative margin to the print-style box, but it resulted in ...

Unleashing the Power: Crafting Impeccable For Loops

After running the select query in the "get-employee.php" page, I obtained the answer for this page. Then, I returned the data to the previous page (home.php). On this page, I added a for loop in JavaScript before the tag with the class "col-md-3". Within t ...