Визуализация нескольких полей в THREE.js и хранить в 3-мерном массиве

#javascript #three.js

Вопрос:

Я написал код для отображения группы блоков 16×16 в THREE.js.

 const drawGroup = () => {

    const blockConstant = 16

    // Positions
    for (let x = 0; x < blockConstant; x  ) {
        for (let y = 0; y < blockConstant; y  ) {
            for (let z = 0; z < blockConstant; z  ) {
                const mesh = new THREE.Mesh(geometry, material)
                mesh.position.set(x, y, z)
                scene.add(mesh)

                const lines = new THREE.LineSegments(edgesGeometry, edgesMaterial)
                mesh.add(lines)
                //console.log(mesh.position)
            }
        }
    }
}

drawGroup()

 

Теперь я хотел бы сохранить все позиции блоков в группе в 3-мерном массиве. Как бы я это сделал?

Ответ №1:

Просто создайте массив внутри массива, внутри массива.

 const blockConstant = 16

// Start an array in the x-dimension
const positions = [];

// Positions
for (let x = 0; x < blockConstant; x  ) {

    // Create a new array inside x-dimension with y-dimensions
    positions[x] = [];

    for (let y = 0; y < blockConstant; y  ) {

        // Create a new array inside y-dimension with z-dimensions
        positions[x][y] = [];

        for (let z = 0; z < blockConstant; z  ) {

            // Now you can access the 3D-array to assign whatever value you wish
            positions[x][y][z] = `${x}, ${y}, ${z} n`;
        }
    }
}
console.log(positions.toString()); 

Кроме того, имейте в виду, что 16 x 16 x 16 блок даст 4096 ячеек, что, скорее всего, даст вам довольно низкую частоту кадров. Я рекомендую вам использовать какой-то метод создания экземпляров, чтобы отобразить все блоки в одном вызове и улучшить проблемы с частотой кадров.