What is the best way to generate a 3x3x3 blank matrix in JavaScript?

Question

What is the best way to generate a 3x3x3 blank matrix in JavaScript?

I am attempting to construct a 3*3*3 matrix where each element will hold a cube. Currently, all the cubes are arranged in a 1D matrix called all_cube. However, I need to organize them in a 3D matrix named cube[][][].

Below is the code for a more detailed explanation:

function createCubie()
{
    all_cube=[];
    for(var i= -1;i<=1;i++)
    {
        for(var j= -1;j<=1;j++)
        {
            for(var k= -1;k<=1;k++)
            {
                var cube = new THREE.Mesh( geometry, material );
                cube.translateX(i*5.5);
                cube.translateY(j*5.5);
                cube.translateZ(k*5.5);

                scene.add( cube );
                all_cube.push(cube);
            }
        }

    }
}

javascript matrix three.js

Answer 1

Answer №1

An effective approach involves utilizing nested Array.from() along with its built-in mapping callback.

The issue arises from not creating any internal arrays and instead pushing all elements into a single flat array.

const arr = Array.from({length:3}, (_, i) => {
    return Array.from({length:3}, (_, j) => `row ${i}, elem ${j}`)
});
console.log(arr)

Answer 2

An effective approach involves utilizing nested Array.from() along with its built-in mapping callback.

The issue arises from not creating any internal arrays and instead pushing all elements into a single flat array.

const arr = Array.from({length:3}, (_, i) => {
    return Array.from({length:3}, (_, j) => `row ${i}, elem ${j}`)
});
console.log(arr)

Answer 3

Answer №2

To achieve the desired output, it is necessary to generate an array for each level and then add it to the previous level's array.

function buildCubeStructure()
{
    const cubeArray = [];
    for(let i= -1; i<= 1; i++)
    {
        const planeArray = [];
        cubeArray.push(planeArray);
        for(let j= -1; j<= 1; j++)
        {
            const rowArray = [];
            planeArray.push(rowArray);
            for(let k= -1; k<= 1; k++)
            {
                const cubeMesh = new THREE.Mesh( geometryObject, materialObject );
                cubeMesh.translateX(i*5.5);
                cubeMesh.translateY(j*5.5);
                cubeMesh.translateZ(k*5.5);

                scene.add(cubeMesh);
                rowArray.push(cubeMesh);
            }
        }

    }
    return cubeArray;
}

// ---- ignore below this line ----

// Necessary declarations for code execution
const geometryObject = 0;
const materialObject = 0;
const scene = { add() {} };
class Mesh 
{ 
    constructor() {}
    translateX(value) { this.x = value; }
    translateY(value) { this.y = value; }
    translateZ(value) { this.z = value; }
}
const THREE = { Mesh };

console.log(buildCubeStructure());

Answer 4

To achieve the desired output, it is necessary to generate an array for each level and then add it to the previous level's array.

function buildCubeStructure()
{
    const cubeArray = [];
    for(let i= -1; i<= 1; i++)
    {
        const planeArray = [];
        cubeArray.push(planeArray);
        for(let j= -1; j<= 1; j++)
        {
            const rowArray = [];
            planeArray.push(rowArray);
            for(let k= -1; k<= 1; k++)
            {
                const cubeMesh = new THREE.Mesh( geometryObject, materialObject );
                cubeMesh.translateX(i*5.5);
                cubeMesh.translateY(j*5.5);
                cubeMesh.translateZ(k*5.5);

                scene.add(cubeMesh);
                rowArray.push(cubeMesh);
            }
        }

    }
    return cubeArray;
}

// ---- ignore below this line ----

// Necessary declarations for code execution
const geometryObject = 0;
const materialObject = 0;
const scene = { add() {} };
class Mesh 
{ 
    constructor() {}
    translateX(value) { this.x = value; }
    translateY(value) { this.y = value; }
    translateZ(value) { this.z = value; }
}
const THREE = { Mesh };

console.log(buildCubeStructure());

Answer 5

Answer №3

A matrix is essentially a collection of nested arrays with varying depths. While Javascript doesn't support true multidimensional arrays, it can achieve similar results by nesting arrays within each other.

let cube = [[["x1"],["x2"],["x3"]],[["y1"],["y2"],["y3"]],[["z1"],["z2"],["z3"]]];

console.log(cube[0][0][0]);

Answer 6

A matrix is essentially a collection of nested arrays with varying depths. While Javascript doesn't support true multidimensional arrays, it can achieve similar results by nesting arrays within each other.

let cube = [[["x1"],["x2"],["x3"]],[["y1"],["y2"],["y3"]],[["z1"],["z2"],["z3"]]];

console.log(cube[0][0][0]);

What is the best way to generate a 3x3x3 blank matrix in JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing UTC Time with AngularUI's UI-Date Datepicker

When scrolling, apply a CSS class to a div element once it becomes visible on the

Schema for Monogo Database

Guide to configuring a service worker to manage the main website path

Pass the full path of the Dropzone file to the Rails controller

The "require" keyword cannot be used in a Node-RED Function node

ISO format for the number of weeks in a month, considering weeks that cross over Thursday

Utilize filters to apply a class to an element only if its index exists within

Applying a combination of shaders to a single 3D object in Three.js and WebGL: A step-by-step guide

Angular 10 does not fulfill promises as expected

Can you explain how HTML and JavaScript work together in terms of execution order?

Perform simple arithmetic operations between a number and a string using Angular within an HTML context

Having difficulty locating any content within the return element in JSX

What is the most effective way to create a straightforward user interface in Node Js for the purpose of automation?

A React-based frontend solution designed exclusively for managing data structures and databases

The error message "Comparison between 'NoneType' and 'int' not possible in Django dynamically added forms" is indicating an issue with comparing instances of different data types

Improving the efficiency of checking roles in Discord.js

The issue with Jquery.Validate not functioning properly when trying to upload a file

Creating dynamically generated nested text inputs with individual v-model bindings upon the clicking of a button

Issue with utilizing addEventListener("load") in Firefox in conjunction with <iframe>