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 have successfully implemented a random display, here is the working jsfiddle link: http://jsfiddle.net/sagh0900/BEWkQ/. However, I am looking to arrange the cubes in a 10 x 10 pattern as shown in the image below. The colors of the cubes can be disregarded, but I do need them arranged in the specified fashion.
Currently, I am facing difficulties in adjusting the positions of the cubes.