如何使用three.js等距显示10 x 10的多维数据集？

Question

var container, camera, scene, renderer;
var scale = 100, N=1000;
var arr= [];
var width = 720, height = 405;
init();
animate();
function init() 
        {
            container = document.getElementById('theCanvas');
            camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 10000 );
            camera.position.x = 0;
            camera.position.y = 0;
            camera.position.z = 80;
            scene = new THREE.Scene();

            renderer = new THREE.WebGLRenderer({antialias:true});

            renderer.setClearColorHex(0x000000, 1);
            renderer.setSize( width, height );

            container.appendChild( renderer.domElement );

            document.getElementById('3dobjects').innerHTML = "Three.js Demo, The number of Cube Objects: " +N;

            var geometry = new THREE.CubeGeometry( 1, 1, 1 );

            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            for ( var i = 0; i < N; i++)
            {
                arr.push(new THREE.Mesh( geometry, material ));
                scene.add( arr[i] );
                arr[i].position.set( (Math.random()-0.5) * scale, (Math.random()-0.5) * scale, (Math.random()-0.5) * scale );
            }


            }

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

       }

        function render() 
        {    
            renderer.render(scene, camera);          
        }
        ​

I'm able to display in random fashion, here is the jsfiddle link working link: http://jsfiddle.net/sagh0900/BEWkQ/ but I needed, the cubes should be displayed in 10 x 10 fashion like below image, don't mind the colors of cube, I request for the fashion

I was unable to play with the position of cubes.

Answer 1

Modified your fiddle to get you started with what you want.

// ...
var cube = new THREE.Mesh( geometry, material );
arr.push(cube);
scene.add(cube);
cube.position.set(2* j, 2* i,40 );

Answer 2

This should do the trick.

var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = ( i % 10 ) * 3;
mesh.position.y = Math.floor( i / 10 ) * 3;