Rotate each grid item around its own center in THREE.js

Question

I want to create a grid of geometries (ROWS * COLUMNS) and wanna rotate each individual mesh around it's own center.

I generate the grid through two for loops, translate the single elements to there correct position and push them into an array to use them again in the animation function. In the animation function I iterate again over all the elements and rotate every single one.

the problem is that even though I address each element individually and I have translated each element to the right place, each element still revolves around the center of the page and not its own center (see the screenshot)

Here is my current attempt:

 const main = () => { const ROWS = 4; const COLUMNS = 4; const ITEMS = []; const canvas = document.querySelector('#canvas'); const renderer = new THREE.WebGLRenderer({canvas, antialias: true}); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(1, window.innerWidth/window.innerHeight, 0.1, 1000); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor('#e5e5e5'); camera.position.z = 500; // GEOMETRY for (let x = 0; x < COLUMNS; x++) { for (let y = 0; y < ROWS; y++) { const geometry = new THREE.BoxGeometry(1, 1, 0.5); const edges = new THREE.EdgesGeometry(geometry); const edgesMaterial = new THREE.LineBasicMaterial({ color: 0x1940EB }); const edgesMesh = new THREE.LineSegments(edges, edgesMaterial); ITEMS.push(edgesMesh); edges.translate(x*1.5, y*1.5, 0); scene.add(edgesMesh); } } scene.position.set(-COLUMNS/2, -ROWS/2, 0); const animation = () => { requestAnimationFrame(animation); ITEMS.map(item => { item.rotation.x += 0.01; item.rotation.y += 0.01; }) camera.updateMatrixWorld(); renderer.render(scene, camera); } const onWindowResize = () => { const w = window.innerWidth; const h = window.innerHeight; camera.aspect = w / h; camera.updateProjectionMatrix(); renderer.setSize(w, h); } animation(); onWindowResize(); window.addEventListener('resize', onWindowResize, false); }; window.addEventListener('load', main, false);

 body { padding: 0; margin: 0; height: 100vh; } canvas { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script> <canvas id="canvas"></canvas>

Can someone explain to me why the elements individually addressed in the animation function still do not revolve around themselves?

Thanks for your help

Answer 1

Because the code is moving the geometry itself so that it's center is no longer in the middle of the box.

change

      edges.translate(x*1.5, y*1.5, 0);

to

      edgesMesh.position.set(x*1.5, y*1.5, 0);

This will move the Object3D in the scenegraph instead of the vertices of the geometry data.

 const main = () => { const ROWS = 4; const COLUMNS = 4; const ITEMS = []; const canvas = document.querySelector('#canvas'); const renderer = new THREE.WebGLRenderer({canvas, antialias: true}); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(1, window.innerWidth/window.innerHeight, 0.1, 1000); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor('#e5e5e5'); camera.position.z = 500; // GEOMETRY for (let x = 0; x < COLUMNS; x++) { for (let y = 0; y < ROWS; y++) { const geometry = new THREE.BoxGeometry(1, 1, 0.5); const edges = new THREE.EdgesGeometry(geometry); const edgesMaterial = new THREE.LineBasicMaterial({ color: 0x1940EB }); const edgesMesh = new THREE.LineSegments(edges, edgesMaterial); ITEMS.push(edgesMesh); edgesMesh.position.set(x*1.5, y*1.5, 0); scene.add(edgesMesh); } } scene.position.set(-COLUMNS/2, -ROWS/2, 0); const animation = () => { requestAnimationFrame(animation); ITEMS.map(item => { item.rotation.x += 0.01; item.rotation.y += 0.01; }) camera.updateMatrixWorld(); renderer.render(scene, camera); } const onWindowResize = () => { const w = window.innerWidth; const h = window.innerHeight; camera.aspect = w / h; camera.updateProjectionMatrix(); renderer.setSize(w, h); } animation(); onWindowResize(); window.addEventListener('resize', onWindowResize, false); }; window.addEventListener('load', main, false);

 body { padding: 0; margin: 0; height: 100vh; } canvas { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script> <canvas id="canvas"></canvas>

You might find this article useful