Can't rotate each mesh on animation update - three.js

Question

I am quite new to Three.js and have been experimenting to get familiar with it.
I am making this exercise where I add to the scene 35 icosahedrons. I would like for each one of them to rotate when calling requestAnimationFrame.
I thought that by looping into each group children element (which is each mesh) and adding value to x and y rotation I could make the meshes rotate. Why is not so? Any help is very appreciated. Thank you.
This my approach:
var camera, scene, renderer;
var geometry, material, mesh;
var edgesGeometry, edgesMaterial, edges;
var group;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init()
animate()
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1500;
scene = new THREE.Scene();
group = new THREE.Group();
for ( var i = 0; i < 35; i ++ ) {
var randomSize = Math.floor( Math.random() * (150 - 20) + 20 )
geometry = new THREE.IcosahedronGeometry( randomSize, 1 );
material = new THREE.MeshBasicMaterial({ color: 0x000000 });
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = Math.random() * 2000 - 1000;
mesh.position.y = Math.random() * 2000 - 1000;
mesh.position.z = Math.random() * 2000 - 1000;
mesh.rotation.x = Math.random() * 2 * Math.PI;
mesh.rotation.y = Math.random() * 2 * Math.PI;
edgesGeometry = new THREE.EdgesGeometry( mesh.geometry )
edgesMaterial = new THREE.LineBasicMaterial( { color: 0x63E260, linewidth: 2 } )
edges = new THREE.LineSegments( edgesGeometry, edgesMaterial )
mesh.add( edges )
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
group.add( mesh );
}
scene.add( group );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) * 0.25;
mouseY = ( event.clientY - windowHalfY ) * 0.25;
}
function animate() {
requestAnimationFrame( animate );
for ( var i = 0; i < group.children.length; i ++ ) {
group.children[i].rotation.x += 0.001;
group.children[i].rotation.y += 0.001;
}
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js"></script>

Answer 1

To expand on #prisoner849's comment:
When three.js renders a scene, it parses the entire scene looking for renderable items (visible, within the view frustum, etc.). Part of that process involves multiplying out the transformation matrices to populate the world matrix (matrixWorld) of each renderable item is up-to-date. As you can imagine, this can potentially be a process hog, so you also have the ability to turn off that auto-update.
It looks like you understand that, because your line of code: mesh.matrixAutoUpdate = false; does exactly that, then you follow it up by manually updating the mesh's matrix. This is mostly correct, but you also need to do this for each frame.
For a simple/shallow scene like yours, #prisoner849's approach is correct--just let three.js auto-update the matrices by removing the lines mentioned. But if your scene is more complex, and you want finer control over it, you'll need to exert that control for each frame you want to render.
In the example below, I took your original code and made it so that only every second icosahedron rotates. This is accomplished by collecting them into an array, and then only updating the matrices for objects in that array. (Also note I turned off matrix auto-updating for the entire scene, rather than individual objects.)
var camera, scene, renderer;
var geometry, material, mesh;
var edgesGeometry, edgesMaterial, edges;
var group;
var mouseX = 0,
mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var updatableObjects = [];
init()
animate()
function init() {
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1500;
scene = new THREE.Scene();
scene.autoUpdateMatrix = false; // turn off automatic matrix computation
group = new THREE.Group();
for (var i = 0; i < 35; i++) {
var randomSize = Math.floor(Math.random() * (150 - 20) + 20)
geometry = new THREE.IcosahedronGeometry(randomSize, 1);
material = new THREE.MeshBasicMaterial({
color: 0x000000
});
mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 2000 - 1000;
mesh.position.y = Math.random() * 2000 - 1000;
mesh.position.z = Math.random() * 2000 - 1000;
mesh.rotation.x = Math.random() * 2 * Math.PI;
mesh.rotation.y = Math.random() * 2 * Math.PI;
edgesGeometry = new THREE.EdgesGeometry(mesh.geometry)
edgesMaterial = new THREE.LineBasicMaterial({
color: 0x63E260,
linewidth: 2
})
edges = new THREE.LineSegments(edgesGeometry, edgesMaterial)
mesh.add(edges)
if (i % 2) {
updatableObjects.push(mesh);
}
group.add(mesh);
}
scene.add(group);
//
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//
document.addEventListener('mousemove', onDocumentMouseMove, false);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX) * 0.25;
mouseY = (event.clientY - windowHalfY) * 0.25;
}
function updateMeshes(mesh) {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
mesh.updateMatrix();
}
function animate() {
requestAnimationFrame(animate);
updatableObjects.forEach(updateMeshes);
render();
}
function render() {
camera.position.x += (mouseX - camera.position.x) * 0.05;
camera.position.y += (-mouseY - camera.position.y) * 0.05
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js"></script>