Estoy tratando de renderizar varias cajas juntas en una estructura como en la imagen que estoy proporcionando. Quiero probar las limitaciones de la GPU a medida que agrego más, luego intentaré optimizar. Estoy usando TRES.js, que está escrito en JavaScript. Si es posible, me gustaría implementar esta tarea con una matriz tridimensional. Creo que esta sería la forma más eficiente. Sin embargo, no estoy seguro de cómo hacerlo en JavaScript.
[Grupo de casilla 1
Pruébalo así:
let renderer, scene, camera; init(); animate(); function init() { // renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // scene scene = new THREE.Scene(); // camera camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000); camera.position.set(40, 40, 40); camera.lookAt(0, 10, 0); // geometry const geometry = new THREE.BoxGeometry(); const edgesGeometry = new THREE.EdgesGeometry(geometry); // material const material = new THREE.MeshBasicMaterial({ color: 0xffff00, }); const edgesMaterial = new THREE.LineBasicMaterial({ color: 0x000000 }); // positions for (let x = -10; x < 10; x++) { for (let y = 0; y < 20; y++) { for (let z = -10; z < 10; z++) { // mesh const mesh = new THREE.Mesh(geometry, material); mesh.scale.multiplyScalar(0.9); mesh.position.set(x, y, z); scene.add(mesh); const lines = new THREE.LineSegments(edgesGeometry, edgesMaterial); mesh.add(lines); } } } } function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } body { margin: 0px; } <script src="https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.min.js"></script>