Куб из кубиков в трех. JS

Question

Я только начал использовать ТРИ. js, и я пытаюсь сделать «куб» из кубов, подобный этому:

Я пытаюсь выполнить sh это с помощью трехмерного массива, который следует структуре: [[grid][line,line][[cube,cube],[cube,cube]]]. Как и в случае, куб состоит из сеток, которые состоят из линий, которые состоят из самих кубов. Вот код:

function lineOfMeshes(w, g) {
  var cubes = [];

  for (var i = 0; i < w; i++) {
    cubes.push(new THREE.Mesh(geometry, material));
    cubes[i].position.x += i * g;
  }
  //console.log("LINE:" + cubes);
  return cubes;
}

function gridOfMeshes(w, g) {
  cubes = [];
  for (var line = 0; line < w; line++) {
    cubes.push(lineOfMeshes(w, g));
    for (var cube = 0; cube < w; cube++) {
      cubes[line][cube].position.z += line * g;
    }
  }
  //console.log("GRID: " + cubes);
  return cubes;
}

function cubeOfMeshes(w, g) {
  cubes = [];

  for (var grid = 0; grid < w; grid++) {
    cubes.push(gridOfMeshes(w, g));
    for (var line=0;line<w;line++) {
      for (var cube = 0; cube < w; cube++) {
        cubes[grid][line][cube].position.z += line * g;
      }
    }

  }
  //console.log("CUBE"+ cubes);
  return cubes;
}

//var container = document.getElementById("3dcontainer");

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
var geometry = new THREE.BoxGeometry(); //object that contains all the points and faces of the cube
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); //material that colors the box
//var cube = new THREE.Mesh(geometry, material); //a mesh is an object that takes a geometry and applies a material to it

///////////////////////////////////////////////////////

let gridWidth = 5;
let gridGap = 3;

cubes = cubeOfMeshes(gridWidth, gridGap);

cubes.forEach(grid => {
  grid.forEach(line => {
    line.forEach(cube=>{
      scene.add(cube);
    })
  });
});

camera.position.z = 5;

///////////////////////////////////////////////////////

//render loop
function animate() {
  requestAnimationFrame(animate);

  controls.update();

  renderer.render(scene, camera);
}
animate();

Однако, когда я запускаю его, он выдает ошибку:

 index.js:31 Uncaught TypeError: Cannot read property 'position' of undefined
    at cubeOfMeshes (index.js:31)
    at index.js:65

Я не уверен, почему это происходит. Я считаю, что я правильно индексирую. Любая помощь приветствуется, спасибо заранее.

Answer 1

Это потому, что в gridOfMeshes и cubeOfMeshes вы не ставили const, let или var перед cubes, поэтому они фактически являются одной и той же переменной и перезаписываются

примечание: если вы добавите

'use strict';

в верхнюю часть вашего JavaScript, это будет указывать на эту ошибку в консоли JavaScript с

Uncaught ReferenceError: cubes is not defined
    at cubeOfMeshes (js:40)
    at js:80

Далее, если вы используете редактор типа Код Visual Studio и устанавливаете плагин eslint . Возможно, вам придется настроить его, но если вы потратите несколько минут на его настройку, он будет выделять подобные ошибки при вводе.