Quiero hacer algo exactamente como esto, pero puedo cambiar la cantidad de cubos en la cuadrícula con una variable (no tengo idea de cómo empezar)
Deberá agregar los cubos a un Group , luego agregar ese Group a una escena, luego centrar el Group
Aquí hay un enfoque para hacer esto:
const grid = new THREE.Group(); const cubeSize = 0.25; const rows = 4; const cols = 4; const gap = 0.01; for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { for (let z = 0; z < rows; z++) { const cube = createCube(cubeSize); const pos = ((cubeSize / 2) * rows) / 2 + gap; const x = pos * row; const y = pos * col; cube.position.set(x, y, pos * z); grid.add(cube); } } } scene.add(grid); Tenga en cuenta que esto no escalará bien cuantos más cubos agregue. Dado que la cantidad total de objetos será (rows + cols) ^ 3 , lo que producirá una gran cantidad de objetos. A la luz de esto, puede usar la malla InstancedMesh , de la cual mostré una demostración a continuación.
Manifestación:
* { box-sizing: border-box; margin: 0; padding: 0; } canvas { display: block; } <script type="module"> import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js"; import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/controls/OrbitControls.js"; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const controls = new OrbitControls(camera, renderer.domElement); const grid = new THREE.Group(); const cubeSize = 0.25; const size = 20; const gap = 0.01; const geometry = new THREE.BoxBufferGeometry( cubeSize, cubeSize, cubeSize ); const material = new THREE.MeshNormalMaterial(); const cubes = new THREE.InstancedMesh( geometry, material, Math.pow(size, 3) ); cubes.instanceMatrix.setUsage(THREE.DynamicDrawUsage); grid.add(cubes); scene.add(grid); const cube = new THREE.Object3D(); const center = (size + gap * (size - 1)) * -0.5; grid.position.set(center, center, center); camera.position.z = size * 1.5; (function animate() { requestAnimationFrame(animate); let i = 0; for (let x = 0; x < size; x++) { for (let y = 0; y < size; y++) { for (let z = 0; z < size; z++) { cube.position.set(x, y, z); cube.updateMatrix(); cubes.setMatrixAt(i, cube.matrix); i++; } } } cubes.instanceMatrix.needsUpdate = true; controls.update(); renderer.render(scene, camera); })(); </script>