Tips for spinning each individual particle around its own axis within a Particle system in THREE.js?

Question

Tips for spinning each individual particle around its own axis within a Particle system in THREE.js?

I'm currently working on a space scene where I'm using a particle system to create a group of asteroids. I'd like to rotate each asteroid on its own axis. Below is the code snippet I'm using to set up the particle system:

var asteroidGeometry = new THREE.Geometry();
for(var i=0;i<=10000;i++)
{
    asteroidGeometry.vertices.push( new THREE.Vector3( Math.random()*10000-5000,  Math.random()*10000-5000, Math.random()*10000-5000 ) );

}
var asteroidTexture= THREE.ImageUtils.loadTexture("images/asteroids.png");
var asteroidMaterial = new THREE.ParticleBasicMaterial({color: 'white',size:500,map: asteroidTexture, alphaTest: 0.8});
asteroids = new THREE.ParticleSystem(asteroidGeometry, asteroidMaterial);

scene.add(asteroids);

If I try something like this:

asteroid.position.x += 0.1;

it rotates the entire system. Is there a way to rotate each particle on its own axis?

javascript three.js

Answer 1

Answer №1

Each individual vertex within a THREE.Geometry object can be accessed through its vertices array.

I stumbled upon a helpful tutorial that elaborates on animating particles in a particle system independently. Below is a snippet from the update animation loop with some slight tweaks.

function update() {

    var pCount = particleCount;
    while (pCount--) {

        var particle = particles.vertices[pCount];

        if (particle.position.y < -200) {
            particle.position.y = 200;
            particle.velocity.y = 0;
        }

        particle.velocity.y -= Math.random() * .1;

        particle.position.addSelf(particle.velocity);
    }

    particleSystem.geometry.__dirtyVertices = true;
    renderer.render(scene, camera);
    requestAnimFrame(update);
}

Answer 2

Each individual vertex within a THREE.Geometry object can be accessed through its vertices array.

I stumbled upon a helpful tutorial that elaborates on animating particles in a particle system independently. Below is a snippet from the update animation loop with some slight tweaks.

function update() {

    var pCount = particleCount;
    while (pCount--) {

        var particle = particles.vertices[pCount];

        if (particle.position.y < -200) {
            particle.position.y = 200;
            particle.velocity.y = 0;
        }

        particle.velocity.y -= Math.random() * .1;

        particle.position.addSelf(particle.velocity);
    }

    particleSystem.geometry.__dirtyVertices = true;
    renderer.render(scene, camera);
    requestAnimFrame(update);
}

Tips for spinning each individual particle around its own axis within a Particle system in THREE.js?

Answer №1

Similar questions

Troubleshoot: Dropdown menu in Materialize not functioning (menu fails to drop down

Issue while rendering Vuex

The link.url in my code is consistently changing, while the pathName remains static

Duplicate the array of objects and make alterations without affecting the original array

loop through an array and use splice to select items and modify the array

Issues encountered when executing unit tests using karma

"Utilize JavaScript to extract data from JSON and dynamically generate a

Opposition.js conditional graph insertion

Steps to develop a log-in API using Node.js

The efficiency of Testing Library findBy* queries is optimized when utilized alongside async/await functionality

What is the best way to calculate the total duration (hh:mm) of all TR elements using jQuery?

What is the process for incorporating a new URL into the routes.js file of a preexisting Node.js project that was developed with locomotive?

Using jQuery to retrieve the HTML code for links

Creating a JavaScript/jQuery array containing values from multiple input fields

In a VueJS project, access an xlsx file stored in the public directory by reading its contents

How to efficiently import Xlsx and csv files using AngularJS

CSS - starting fresh with animations

Error Occurs When Attempting to Call ASPX Codebehind Function from JavaScript

ESLint error: EROFS read-only does not correspond to any directory

Converting php array submitted from a form using ajax