javascript - 如何使用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);          
        }
        ​

我能够以随机方式显示，这是 jsfiddle 链接工作链接：http: //jsfiddle.net/sagh0900/BEWkQ/但我需要，立方体应该以 10 x 10 的方式显示，如下图所示，不要不介意立方体的颜色，我要求时尚

我无法玩立方体的位置。

Answer 1

修改了你的小提琴，让你开始你想要的。

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

Answer 2

这应该可以解决问题。

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