Animation with multiple meshes in Three.js

Question

Animation with multiple meshes in Three.js

Having just started working with threejs, I decided to use a for loop to create 400 cylinders. The rendering of the objects in the scene works perfectly. However, when it comes to animating the cylinders, only one out of the 400 seems to rotate. How can I make all of the cylinders rotate?

Below is the code I used:

for( var j = 0; j < 400; j++){
    abgeometry2 = new THREE.CylinderGeometry (1, 5, 8, 4);
    abmesh2 = new THREE.MeshPhongMaterial({color: 0x3B170B, wireframe: false });
    mesh2 = new THREE.Mesh(abgeometry2, abmesh2);
    mesh2.position.x = Math.random() * 400 - 200;
    mesh2.position.y = Math.random() * 400 - 200;
    mesh2.position.z = Math.random() * 400 - 200;
    scene.add( mesh2 );
}

In the animate function, I added the following line of code: mesh2.rotation.z += 0.06;. I understand that I might be missing something obvious, as I am still learning the ins and outs of threejs.

javascript animation three.js

Answer 1

Answer №1

The rotation is specifically applied to the final cylinder because all cylinders are being linked to mesh2 in the loop.

You can experiment with a modified approach like this:

var numOfCylinders = 300;

var cylinderArr = [];

var geometry = new THREE.CylinderGeometry (1, 5, 8, 4);
var material = new THREE.MeshPhongMaterial({color: 0x3B170B, wireframe: false });

for (var j = 0; j < numOfCylinders; j++){
    var currentCylinder = new THREE.Mesh(geometry, material);

    currentCylinder.position.x = Math.random() * 300 - 150;
    currentCylinder.position.y = Math.random() * 300 - 150;
    currentCylinder.position.z = Math.random() * 300 - 150;

    scene.add(currentCylinder);

    cylinderArr.push(currentCylinder);
}

var rendering = function () {
    requestAnimationFrame( rendering );

    for (var j = 0; j < numOfCylinders; j++){
        cylinderArr[j].rotation.z += 0.06;
    }

    renderer.render(scene, camera);
};

rendering();

Answer 2

The rotation is specifically applied to the final cylinder because all cylinders are being linked to mesh2 in the loop.

You can experiment with a modified approach like this:

var numOfCylinders = 300;

var cylinderArr = [];

var geometry = new THREE.CylinderGeometry (1, 5, 8, 4);
var material = new THREE.MeshPhongMaterial({color: 0x3B170B, wireframe: false });

for (var j = 0; j < numOfCylinders; j++){
    var currentCylinder = new THREE.Mesh(geometry, material);

    currentCylinder.position.x = Math.random() * 300 - 150;
    currentCylinder.position.y = Math.random() * 300 - 150;
    currentCylinder.position.z = Math.random() * 300 - 150;

    scene.add(currentCylinder);

    cylinderArr.push(currentCylinder);
}

var rendering = function () {
    requestAnimationFrame( rendering );

    for (var j = 0; j < numOfCylinders; j++){
        cylinderArr[j].rotation.z += 0.06;
    }

    renderer.render(scene, camera);
};

rendering();

Animation with multiple meshes in Three.js

Answer №1

Similar questions

Update a separate React component in response to the interaction with a different React component

What is the best way to eliminate base tags from jQuery mobile scripts?

Issue with importing a library into a Next.js component

How can I make one object's position target another grouped object in three.js, while still enabling rotation to track a camera in augmented reality?

Is there a way to check if a file name input is valid using regular expressions?

Is it possible to create Android apps using HTML and JavaScript?

Angular ng-repeat not recognizing nested ng-if conditions

Is there a way to showcase an epub format book using only HTML5, CSS, and jQuery?

Can you explain the use of the 'this' keyword in map() and call() functions?

Issue with Color in Line Chart of Flot Version 0.8.2

What is the best way to eliminate all padding from a bootstrap toast notification?

Using a combination of stringify, regular expressions, and parsing to manipulate objects

The command 'node' is not identified as an internal or external command, executable program, or batch file

What is the best way to incorporate options using jQuery?

Position an element in the middle of the range between the tallest and shortest characters

Does type conversion have a specific ranking of preference?

Emulate clicking a radio button (using PHP and JS)

Tips on setting up the table with php and javascript

Tips for updating an ASP.NET MVC page when the browser back button is pressed

Tips for attaching a "progress" and refresh event to an ajax call while sending a file