Forum Pasja Informatyki - Najnowsze z tagiem webgl

Webgl - Obracanie kamery i problem z osiami

Tue, 17 Aug 2021 22:10:17 +0000

Witam.

To mój pierwszy post na tym forum. Chciałbym się przywitać z wszystkimi użytkownikami tego wspaniałego forum.

Niestety moja wizyta podyktowana jest pewnym problemem na jaki napotkałem. Od pewnego czasu pisze bibliotekę obsługująca webgl i obecnie zabrałem się za pisanie kamery. Chciałem to zrobić po najmniejszej linii oporu. Miała działać tak:

1. Generuje macierz widoku perspektywicznego.

const aspect = GL.canvas.clientWidth / GL.canvas.clientHeight;
const projectionMatrix = m4.perspective(fieldOfViewRadians, aspect, 1, 2000);

2. Ustawiam kamerę na jakiejś pozycji i ustawiam punkt patrzenia na wprost.

cameraPosition = [pos_x, pos_y, pos_z];
cameraMatrix = m4.lookAt(cameraPosition, this.target, up);

3. Modyfikuje za pomocą macierzy obrotu widok w dwóch płaszczyznach.

cameraMatrix = m4.zRotate(cameraMatrix, angle_z); 
viewMatrix = m4.yRotate(cameraMatrix, angle_y); // ta oś sprawia kłopot

4.Potem wszystko składam:

 viewMatrix = m4.inverse(viewMatrix);// Make a view matrix from the camera matrix.
 matrix = m4.multiply(projectionMatrix, viewMatrix);

W teorii wydaje się że powinno działać i faktycznie działa dla jednej osi ale problem pojawia się gdy dodaje 2 oś, Nagle obraz zaczyna dziwnie skręcać przy próbie ruchu kamery. Podejrzewam że oś nie jest sztywno połączona z kamerą lub też pierwsza modyfikacja ją zmienia. Czy ktoś wie jak to naprawić? I czy mógłby to tak jakoś prosto mi wyjaśnić?

WebGL, rozciąganie modeli

Sat, 31 Oct 2020 12:32:07 +0000

Witam, tworzę bibliotekę graficzną w Rust / WASM + ugli_webgl i stdweb. Myślę jednak że technologia ani cały kod nie mają tu żadnego znaczenia. Problem jest dość prozaiczny i polega na rozciąganiu się modeli w stosunku do wymiarów okna:

Przedstawione powyżej bryły powinny być sześcianami. Perspektywa wygląda tak:

self.context.viewport(0, 0, window().inner_width(), window().inner_height());

projection = glm::perspective(
        (self.camera.get_zoom() as f32).to_radians(),
         window().inner_width() as f32 / window().inner_height() as f32,
         0.1,
         100.0,
);

FOV domyślnie jest ustawiony na 45 stopni, druki argument to tradycyjne stosunek szerokości do wysokości obszaru wyświetlania. Podobne rozwiązanie zastosowałem w wersji desktopowej w C++, tam jednak wszystko działało poprawnie. Nie wiem co mogłem pominąć, będę bardzo wdzięczny za wskazówki. Implementacja kamery:

use stdweb::web::TypedArray;
use ugli_webgl::WebGL2RenderingContext as gl;

use super::exceptions::{EngineResult, EngineRuntimeError};

use nalgebra_glm as glm;

use stdweb::console;

// -----------------------------------------------------------------------------------------------------------

pub enum MovementDirection {
    Forward,
    Backward,
    Left,
    Right,
}

// -----------------------------------------------------------------------------------------------------------

pub const DEFAULT_YAW: f32 = -90.0;
pub const DEFAULT_PITCH: f32 = 0.0;
pub const DEFAULT_MOVEMENT_SPEED: f32 = 6.0;
pub const DEFAULT_MOVEMENT_SENSITIVITY: f32 = 1.3;
pub const DEFAULT_ZOOM: f32 = 45.0;

// -----------------------------------------------------------------------------------------------------------

pub struct FPSCamera {
    position: glm::TVec3<f32>,
    front: glm::TVec3<f32>,
    up: glm::TVec3<f32>,
    right: glm::TVec3<f32>,
    world_up: glm::TVec3<f32>,
    yaw: f32,
    pitch: f32,
    zoom: f32,
    // const
    movement_speed: f32,
    mouse_sensitivity: f32,
}

// -----------------------------------------------------------------------------------------------------------

impl FPSCamera {
    pub fn new(
        position: glm::TVec3<f32>,
        world_up: glm::TVec3<f32>,
        yaw: f32,
        pitch: f32,
    ) -> FPSCamera {
        let mut camera = FPSCamera {
            front: glm::vec3(0.0, 0.0, -1.0),
            movement_speed: DEFAULT_MOVEMENT_SPEED,
            mouse_sensitivity: DEFAULT_MOVEMENT_SENSITIVITY,
            zoom: DEFAULT_ZOOM,
            position,
            world_up,
            yaw,
            pitch,
            right: glm::vec3(0.5, 0.0, 0.0),
            up: glm::vec3(0.5, 0.0, 0.0),
        };

        camera.update_camera_vectors();

        camera
    }

    fn update_camera_vectors(&mut self) {
        let mut front = glm::vec3(0.0, 0.0, 0.0);
        front.x = self.yaw.to_radians().cos() * &self.pitch.to_radians().cos();
        front.y = self.pitch.to_radians().sin();
        front.z = self.yaw.to_radians().sin() * self.pitch.to_radians().cos();
        self.front = glm::normalize(&front);
        self.right = glm::normalize(&glm::cross(&self.front, &self.world_up));
        self.up = glm::normalize(&glm::cross(&self.right, &self.front));
    }

    pub fn get_view_matrix(&self) -> glm::TMat4<f32> {
        glm::look_at(&self.position, &(self.position + self.front), &self.up)
    }

    pub fn get_zoom(&self) -> f32 {
        self.zoom
    }

    pub fn get_position(&self) -> &glm::TVec3<f32> {
        &self.position
    }

    pub fn process_direction(&mut self, dir: MovementDirection) {
        let velocity = self.movement_speed * 0.01;
        match dir {
            MovementDirection::Forward => self.position += self.front * velocity,
            MovementDirection::Backward => self.position -= self.front * velocity,
            MovementDirection::Left => self.position -= self.right * velocity,
            MovementDirection::Right => self.position += self.right * velocity,
        }
    }

    pub fn process_mouse_movement(&mut self, mut xoffset: f32, mut yoffset: f32) {

        xoffset *= self.mouse_sensitivity;
        yoffset *= self.mouse_sensitivity;

        self.yaw += xoffset;
        self.pitch += yoffset;

        if self.pitch > 89.0 {
            self.pitch = 89.0;
        }
        if self.pitch < -89.0 {
            self.pitch = -89.0;
        }

        self.update_camera_vectors();
    }
}

W razie potrzeby mogę dać resztę kodu lub w ogóle link do repozytorium. Z góry dziękuje za pomoc i pozdrawiam :)

Witam, mam następujący problem: element canvas nie chce mi wyświetlić żadnej figury z poziomu kodu. co robić

Fri, 08 May 2020 08:13:21 +0000

function main(){

var plotno=document.querySelector("plotno");
var gl=plotno.getContext("WEBGL");

if(gl===null) {

alert('Nie można zainicjować renderowania.');

return;
}

gl.clearColor(0.0,0.0,0.0,1.0);

gl.clear(gl.COLOR_BUFFER_BIT);
}

window.onload=main;

function draw(drawScene) {
    var plotno = document.querySelector("plotno");
    var plotno = getContext('webgl');

    var vsSource = `
    "attribute vec4 aVertexPosition;"

    "uniform mat4 uModelViewMatrix;"
    "uniform mat4 uProjectionMatrix;"

    void main() {
      gl_Position = "uProjectionMatrix * uModelViewMatrix * aVertexPosition;"
    }
  `;

    function initShaderProgram(gl, vsSource, fsSource) {
       var vertexShader = "loadShader(gl, gl.VERTEX_SHADER, vsSource);"
        var fragmentShader = "loadShader(gl, gl.FRAGMENT_SHADER, fsSource);"

 

        var shaderProgram = "gl.createProgram();"
        "gl.attachShader(shaderProgram, vertexShader);"
        "gl.attachShader(shaderProgram, fragmentShader);"
        "gl.linkProgram(shaderProgram);"

 

        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
            return null;
        }

        return shaderProgram;
    }

    function loadShader(gl, type, source) {
        var shader = "gl.createShader(type);"

 

        gl.shaderSource(shader, source);

 

        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
            return null;
        }

        return shader;
    }

    var shaderProgram = "initShaderProgram(gl, vsSource, fsSource);"

    var programInfo = {
        program: shaderProgram,
        attribLocations: {
            vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
        },
        uniformLocations: {
            projectionMatrix: "gl.getUniformLocation(shaderProgram, 'uProjectionMatrix')",
            modelViewMatrix: "gl.getUniformLocation(shaderProgram, 'uModelViewMatrix')",
        },
    };

    function initBuffers(gl) {

 

        const positionBuffer = gl.createBuffer();

 

        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

 

        var positions = [-1.0, 1.0,
            1.0, 1.0, -1.0, -1.0,
            1.0, -1.0,
        ];

        gl.bufferData(gl.ARRAY_BUFFER,
            new Float32Array(positions),
            gl.STATIC_DRAW);

        return {
            position: positionBuffer,
        };
    }

 

    function drawScene(gl, programInfo, buffers) {
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clearDepth(1.0);
        gl.enable(gl.DEPTH_TEST);
        gl.depthFunc(gl.LEQUAL);

        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        const fieldOfView = 45 * Math.PI / 180; // in radians
        const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
        const zNear = 0.1;
        const zFar = 100.0;
        const projectionMatrix = mat4.create();

        mat4.perspective(projectionMatrix,
            fieldOfView,
            aspect,
            zNear,
            zFar);

        var modelViewMatrix = mat4.create();

 

        mat4.translate(modelViewMatrix,
            modelViewMatrix, [-0.0, 0.0, -6.0]);

        {
            const numComponents = 2; // pull out 2 values per iteration
            const type = gl.FLOAT; // the data in the buffer is 32bit floats
            const normalize = false; // don't normalize
            const stride = 0; // how many bytes to get from one set of values to the next
            // 0 = use type and numComponents above
            const offset = 0; // how many bytes inside the buffer to start from
            gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
            gl.vertexAttribPointer(
                programInfo.attribLocations.vertexPosition,
                numComponents,
                type,
                normalize,
                stride,
                offset);
            gl.enableVertexAttribArray(
                programInfo.attribLocations.vertexPosition);
        }

 

        gl.useProgram(programInfo.program);

 

        gl.uniformMatrix4fv(
            programInfo.uniformLocations.projectionMatrix,
            false,
            projectionMatrix);
        gl.uniformMatrix4fv(
            programInfo.uniformLocations.modelViewMatrix,
            false,
            modelViewMatrix);

        {
            var offset = 0;
            var vertexCount = 4;
            gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
        }
    }
}
window.onload=draw;

Canvas/ webgl/ phaser ... - Wypełnianie kolorem, grafika

Sat, 19 Jan 2019 00:01:17 +0000

Witam, uzywam frameworka phaser, lecz on sam wykorzystuje pixi.js i jest renderowany w Canvas/Webgl i teraz pytanie, chce dodać kontury postaci i żeby można było je wypełnić kolorem (np. buty do postaci i żeby ktoś mog ustawic kolor RGB)

Jak tego dokonać?

WebGL z canvas

Mon, 03 Dec 2018 23:20:06 +0000

Witam, czy istnieje możliwość robienia gier w canvas z użyciem WebGL?

Jak zacząć zabawe z WebGL i czy w ogóle warto się uczyć robić gry na tym, czy może lepiej zastąpić to phaserem, lub połączyć oba?

WebGL zapobieganie zwiększaniu szybkości obrotu

Mon, 30 Jan 2017 02:34:14 +0000

Witam!
Mam pewien problem z moim skryptem WebGL.
Przy klikaniu przycisku 'Uruchom' obiekt za każdym razem zyskuje na prędkości. Chciałbym, żeby prędkość obrotu była stała, bez względu na to ile razy przycisk zostanie wciśnięty. Proszę o pomoc w tym temacie ;)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Grafika komputerowa - WebGL</title>
   <link rel="stylesheet" href="CSS/style.css">
   <script src="JS/matrix.js"></script>
   <script src="JS/main.js"></script>
</head>
<body>
	<div>
		<form class="rotationCheckboxes">
			<input type="checkbox" id="rotateX"> Rotacja X&nbsp;&nbsp;&nbsp;
			<input type="checkbox" id="rotateY"> Rotacja Y&nbsp;&nbsp;&nbsp;
			<input type="checkbox" id="rotateZ"> Rotacja Z
		</form>
		<canvas id="glcanvas" width="500" height="300">Brak wsparcia dla elementu HTML canvas.</canvas>
		<br />
		<input type="button" value="Uruchom" onclick="runWebGL()"/>
		<input type="button" value="Zamknij" onclick="self.close()"/> 
   </div>
</body>
</html>

var gl_canvas;
var gl_ctx;

var _triangleVertexBuffer;
var _triangleFacesBuffer;
var _position;
var _color;
var _PosMatrix;
var _MovMatrix;
var _ViewMatrix;
var _matrixProjection;
var _matrixMovement;
var _matrixView;

var rotationSpeed = 0.001;
var zoomRatio = -6;

var X, Y, Z;

function runWebGL () {
   getRotation();
   gl_canvas = document.getElementById("glcanvas");
   gl_ctx = gl_getContext(gl_canvas);
   gl_initShaders();
   gl_initBuffers();
   gl_setMatrix();
   gl_draw();
}

function getRotation() {
   X = document.getElementById('rotateX').checked;
   Y = document.getElementById('rotateY').checked;
   Z = document.getElementById('rotateZ').checked;
}

// ==================================================================== //

function gl_getContext (canvas) {
   try {
      var ctx = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
      ctx.viewportWidth = canvas.width;
      ctx.viewportHeight = canvas.height;
   } catch (e) {}

   if (!ctx) {
      document.write('Unable to initialize WebGL. Your browser may not support it.')
   }
   return ctx;
}

// ==================================================================== //

// Declare the shaders. They are pieces of code compiled by WebGL and
// executed on the graphics device. They are written in GLSL.
function gl_initShaders () {
   // position of the point - 0. is Z and 1. is W
   // PosMatrix is uniform variable - its value is constant while rendering an object
   // MovMatrix is the movement matrix of the triangle
   // gl_position -> we move position with MovMatrix before projecting it
   var vertexShader = "\n\
      attribute vec3 position;\n\
      uniform mat4 PosMatrix;\n\
      uniform mat4 MovMatrix;\n\
      uniform mat4 ViewMatrix; \n\
      attribute vec3 color;\n\
      varying vec3 vColor;\n\
      void main(void) {\n\
         gl_Position = PosMatrix * ViewMatrix * MovMatrix * vec4(position, 1.);\n\
         vColor = color;\n\
      }";

   // set black color
   var fragmentShader = "\n\
      precision mediump float;\n\
      varying vec3 vColor;\n\
      void main(void) {\n\
         gl_FragColor = vec4(vColor, 1.);\n\
      }";

   // this function is used to compile a shader
   var getShader = function(source, type, typeString) {
      var shader = gl_ctx.createShader(type);
      gl_ctx.shaderSource(shader, source);
      gl_ctx.compileShader(shader);

      if (!gl_ctx.getShaderParameter(shader, gl_ctx.COMPILE_STATUS)) {
         alert('error in' + typeString);
         return false;
      }
      return shader;
   };

   // Compile the vertex and fragment shaders
   var shader_vertex = getShader(vertexShader, gl_ctx.VERTEX_SHADER, "VERTEX");
   var shader_fragment = getShader(fragmentShader, gl_ctx.FRAGMENT_SHADER, "FRAGMENT");


   // Create the Shader program.
   // Shader program is a combination of a vertex and fragment shaders.
   var SHADER_PROGRAM = gl_ctx.createProgram();
   gl_ctx.attachShader(SHADER_PROGRAM, shader_vertex);
   gl_ctx.attachShader(SHADER_PROGRAM, shader_fragment);


   // Linking of the shader program to the WebGL context - gl_ctx,
   // in order to match the shader variables to javascript variables
   gl_ctx.linkProgram(SHADER_PROGRAM);

   // Link PosMatrix\MovMatrix\ViewMatrix GLSL variables to
   // _PosMatrix\_MovMatrix\_ViewMatrix javascript variables
   // Uniforms do not need to be enabled like attributes
   _PosMatrix = gl_ctx.getUniformLocation(SHADER_PROGRAM, "PosMatrix");
   _MovMatrix = gl_ctx.getUniformLocation(SHADER_PROGRAM, "MovMatrix");
   _ViewMatrix = gl_ctx.getUniformLocation(SHADER_PROGRAM, "ViewMatrix");

   // position GLSL variable links to _position variable
   _position = gl_ctx.getAttribLocation(SHADER_PROGRAM, "position");    // *******
   // color GLSL variable links to _color variable
   _color = gl_ctx.getAttribLocation(SHADER_PROGRAM, "color");
   // enable GLSL attributes variables
   gl_ctx.enableVertexAttribArray(_position);
   gl_ctx.enableVertexAttribArray(_color);
   // linking is over - tells WebGL context to use SHADER_PROGRAM for rendering.
   gl_ctx.useProgram(SHADER_PROGRAM);
}

// ==================================================================== //

function gl_initBuffers () {
   // Point coordinates array of the triangle
//   var triangleVertices = [
//      -1, -1, 0,    // bottom left
//       0, 0, 1,      // submit color: blue
//       1, -1, 0,    // bottom right
//       1, 1, 1,      // submit color: white
//       1, 1, 0,     // top right
//       1, 0, 0       // submit color: red
//   ];
   var triangleVertices = [
    1,0,2,    // wierzchołek #1
    0, 0, 0,       // kolor: czarny
    1,0,0,      // wierzchołek #2
    2, 0, 0,       // kolor: czerwony
    -1,0,1,       // wierzchołek #3
    1, 1, 0,       // kolor: zółty
    0,2,0,       // wierzchołek #4
    0, 1, 0      // kolor: niebieski
];


   // Building Vertex Buffer Object - WebGL vertex array
   _triangleVertexBuffer = gl_ctx.createBuffer();                // *******
   gl_ctx.bindBuffer(gl_ctx.ARRAY_BUFFER, _triangleVertexBuffer);
   gl_ctx.bufferData(gl_ctx.ARRAY_BUFFER, new Float32Array(triangleVertices), gl_ctx.STATIC_DRAW);


   // Triangle faces array
   // var triangleFaces = [0, 1, 2];
   var triangleFaces = [
   0, 1, 2,       // pobierz 1, 2 i 3 wierzchołek z tablicy triangleVertices
   0, 1, 3,
   1, 2, 3,
   0, 2, 3
];

   _triangleFacesBuffer = gl_ctx.createBuffer();                     // *******
   gl_ctx.bindBuffer(gl_ctx.ELEMENT_ARRAY_BUFFER, _triangleFacesBuffer);
   gl_ctx.bufferData(gl_ctx.ELEMENT_ARRAY_BUFFER, new Uint16Array(triangleFaces), gl_ctx.STATIC_DRAW);
}

// ==================================================================== //

function gl_setMatrix () {
   _matrixProjection = MATRIX.getProjection(40, gl_canvas.width/gl_canvas.height, 1, 100);
   _matrixMovement = MATRIX.getIdentityMatrix();
   _matrixView = MATRIX.getIdentityMatrix();

   MATRIX.translateZ(_matrixView, zoomRatio);
}

// ==================================================================== //

function gl_draw() {
   // set the color to transparent
   gl_ctx.clearColor(0.0, 0.0, 0.0, 0.0);
   // enable Depth buffer test and set depth buffer comparison function
   gl_ctx.enable(gl_ctx.DEPTH_TEST);
   gl_ctx.depthFunc(gl_ctx.LEQUAL);

   // set the clear value for the depth buffer to 1
   gl_ctx.clearDepth(1.0);

    var timeOld = 0;
	var dAngle = 0;
	
   var animate = function (time) {
       dAngle = rotationSpeed * (time - timeOld);
		
      if (X) {
         MATRIX.rotateX(_matrixMovement, dAngle);
      }
      if (Y) {
         MATRIX.rotateY(_matrixMovement, dAngle);
      }
      if (Z) {
         MATRIX.rotateZ(_matrixMovement, dAngle);
      }

      timeOld = time;

      // set the drawing area on the canvas and clear it
      gl_ctx.viewport(0.0, 0.0, gl_canvas.width, gl_canvas.height);
      gl_ctx.clear(gl_ctx.COLOR_BUFFER_BIT | gl_ctx.DEPTH_BUFFER_BIT);

      // set projection matrix. _matrixProjection is not set yet.
      // It is a javascript array of 1 dimension with 16 floats
      gl_ctx.uniformMatrix4fv(_PosMatrix, false, _matrixProjection);
      gl_ctx.uniformMatrix4fv(_MovMatrix, false, _matrixMovement);
      gl_ctx.uniformMatrix4fv(_ViewMatrix, false, _matrixView);
      // drawing is here - use these points for next drawing
      // gl_ctx.vertexAttribPointer(variable, dimension, type, normalize, total vertex size in bytes, offset)
      gl_ctx.vertexAttribPointer(_position, 3, gl_ctx.FLOAT, false, 4*6, 0);
      gl_ctx.vertexAttribPointer(_color, 3, gl_ctx.FLOAT, false, 4*4, 0);

      gl_ctx.bindBuffer(gl_ctx.ARRAY_BUFFER, _triangleVertexBuffer);
      gl_ctx.bindBuffer(gl_ctx.ELEMENT_ARRAY_BUFFER, _triangleFacesBuffer);

      // draw the triangle
      //gl_ctx.drawElements(gl_ctx.TRIANGLES, 3, gl_ctx.UNSIGNED_SHORT, 0);

      // draw cube
      gl_ctx.drawElements(gl_ctx.TRIANGLES, 12, gl_ctx.UNSIGNED_SHORT, 0);

      // drawing is finished - show the render
      gl_ctx.flush();
      // redraws the scene as soon as ready
      window.requestAnimationFrame(animate);
   };

   // launch animate for the first time
	   animate(timeOld);

}

Przechwycenie i wypakowanie octet-stream oraz jaki to framework

Sat, 04 Jun 2016 18:10:58 +0000

A więc mamy sobie jakąś tam grę przeglądarkową.
Gra wyświetlana jest w canvas za pośrednictwem JS'a.
Po przez akcję w grze, przeglądarka wysyła request do serwera i otrzymuje odpowiedź zwrotną.
W 90% jest to octet-stream. Potrzebuję się dowiedzieć jak wypakować taki response.
Niestety, nie znam nazwy frameworka, w kórym została ta gra zrobiona.
Dlatego też przesyłam główny plik z grą: https://drive.google.com/open?id=0B_m8fC4d_bzNdlZnVzVjQWpuaW8
Uwaga, gra po rozpakowaniu waży 11mb i jest zminifikowana w js. Nie polecam otwierać w IDE.

BabylonJS czy ThreeJS?

Sun, 24 Apr 2016 07:57:48 +0000

Witam!
Jak w temacie: BabylonJS czy ThreeJS? a może alternatywa?
Proszę o uzasadnianie swoich wypowiedzi, wypisać plusy i minusy :)

Pozdrawiam!

Generowanie koloru na losowym obiekcie

Thu, 24 Mar 2016 13:47:14 +0000

Dobry. Mam sobie kwadraciki 3x3x3 (kostka rubika) i domyślnie kolor jaki ustawiłem przy generacji każdego z nich to czarny z opacity: 0.3. I teraz chciałbym wygenerować dla 10 losowych kwadracików (w położeniu X, Y, Z) inny kolor. Niby mam tablicę i mam wektory, ale nie potrafię ogarnąć logiki takiej funkcji. Za każdy tip byłbym wdzięczny :)

var camera, controls, mesh, scene, renderer, helper,
            MeshBasicMaterial=new THREE.MeshBasicMaterial({
                color: 0x000000,
                opacity: 0.3,
                transparent: true
            });
var BoxGeometry = new THREE.BoxGeometry(16, 16, 16);

var meshArrayX = [];
        for (var x=0; x<3; x++) {
            var meshArrayY = [meshArrayX.push(mesh = new THREE.Mesh(BoxGeometry, MeshBasicMaterial))];
            for(var y=0; y<3; y++){
                var meshArrayZ = [meshArrayY.push(mesh = new THREE.Mesh(BoxGeometry, MeshBasicMaterial))];
                for(var z=0; z<3; z++){
                    meshArrayZ.push(mesh = new THREE.Mesh(BoxGeometry, MeshBasicMaterial));
                    mesh.position.x = 16*x;
                    mesh.position.y = 16*y;
                    mesh.position.z = 16*z;
                    scene.add(mesh);


                    console.log(meshArrayX.length, meshArrayY.length-1, meshArrayZ.length-1, mesh.position);
                    }
                }
            }
        color(mesh)

function random(){
        var random = [0, 16, 32];
        var randomValue = random[Math.floor(random.length * Math.random())];
        console.log(randomValue);
    }

    function color(selector){
        for(var v=0; v<10; v++){
            selector.position.x = random();
            selector.position.y = random();
            selector.position.z = random();
            selector.material.color.setHex(0x0000ff);
        }
    }