如何解决这个循环并按顺序呈现锥体？

Question

   var lc_relationship= null; 
   var container, nSize = 100;
   var camera, scene, renderer;
   var scale = 10, scale1 = 100; N=50, cubeRotSpd=0;
   var arr= [];
   var width = window.innerWidth, height = window.innerHeight;
   function generateData()
  {
var aSensor1 = [],
    aSensor2 = [],
    aSensor3 = [];
lc_relationship = {
        "sensor1":[],
        "sensor2":[],
        "sensor3":[]
                  }
for(i=1; i<=nSize; i++)
{
    aSensor1.push(i);
    aSensor2.push(i);
    aSensor3.push(i);
}
for(n=0; n<nSize; n++)
{
    var pos1 = Math.floor(Math.random() * (nSize-n));
    var pos2 = Math.floor(Math.random() * (nSize-n));
    var pos3 = Math.floor(Math.random() * (nSize-n));
    var int1 = aSensor1[pos1]; aSensor1.splice(pos1,1);
    var int2 = aSensor2[pos2]; aSensor2.splice(pos2,1);
    var int3 = aSensor3[pos3]; aSensor3.splice(pos3,1);
    lc_relationship.sensor1[int1-1]  = 
    {
        "ObjectID" : "sens1_" + rightPad(int1),
        "Geometry" : getGeometry(),
        "Parent":null,
        "child": "sens2_" + rightPad(int2),
        "z_cordinate": -5
    } 
    lc_relationship.sensor2[int2-1]  = 
    {
        "ObjectID" : "sens2_" + rightPad(int2),
        "Geometry" : getGeometry(),
        "Parent":"sens1_" + rightPad(int1),
        "child": "sens3_" + rightPad(int3),
        "z_cordinate": 0
    }
    lc_relationship.sensor3[int3-1]  = 
    {
        "ObjectID" : "sens3_" + rightPad(int3),
        "Geometry" : getGeometry(),
        "Parent":"sens2_" + rightPad(int2),
        "child": null,
        "z_cordinate": 5
    }
}
}
  function rightPad(number) 
{
var tmpStr = number.toString();
return ("000" + tmpStr).substring(tmpStr.length, tmpStr.length+3);
}
       function getGeometry()
{
   var geo = new THREE.Geometry();
   geo.vertices.push(new THREE.Vertex(
   new THREE.Vector3(   0, 0, 0)));
   geo.vertices.push(new THREE.Vertex(
    new THREE.Vector3( -0.5, 0.5, 1)));
   geo.vertices.push(new THREE.Vertex(
    new THREE.Vector3( 0.5, 0.5, 1)));
   geo.vertices.push(new THREE.Vertex(
    new THREE.Vector3( -0.5, -0.5, 1)));
   geo.vertices.push(new THREE.Vertex(
    new THREE.Vector3( 0.5,-0.5, 1)));
geo.faces.push( new THREE.Face3(0,1,2));
geo.faces.push( new THREE.Face3(2,1,4));
geo.faces.push( new THREE.Face3(1,3,4));
geo.faces.push( new THREE.Face3(4,3,0));
geo.faces.push( new THREE.Face3(3,1,0));
geo.faces.push( new THREE.Face3(0,2,4));

geo.computeFaceNormals();
/*  cone = new THREE.Mesh(geo, meshMaterial);
cone.doubleSided = true;
cone.overdraw = true;*/
return geo;
}
 function posgeo()
{   generateData();
//var jsonText = JSON.stringify(lc_relationship);
//document.getElementById("output").innerHTML=jsonText;
//document.getElementById("test").innerHTML=lc_relationship.sensor1[0].z_cordinate;
init();
animate();
 }
  function init() 
 {
    container = document.getElementById("output");
camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 1000 );
camera.position.y = 0;
camera.position.z = 45;
camera.lookAt(new THREE.Vector3(0, 0, 0));  
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.WebGLRenderer(/*{antialias:true}*/);
renderer.setClearColorHex(0xffffff, 1);
renderer.setSize( width, height );
var meshmaterial = new THREE.MeshLambertMaterial( { color: 0x0000CC, opacity: 0.3, depthWrite: false, depthTest: false }); 

我在这个循环中遇到了整个问题，有人可以帮我解决这个问题吗？循环在这里：

for ( var i = 0; i <nSize; i++)
     for ( var j = -5; j < 5; j++)
         for ( var k = -5; k < 5; k++) 
          {
            var cone1 = new THREE.MESH(lc_relationship.sensor1[i].Geometry,meshMaterial);
            cone1.doubleSided = true;
            cone1.overdraw = true;
            scene.add(cone1);
            var cone2 = new THREE.MESH(lc_relationship.sensor2[i].Geometry,meshMaterial);
            cone2.doubleSided = true;
            cone2.overdraw = true;
            scene.add(cone2);
            var cone3 = new THREE.MESH(lc_relationship.sensor3[i].Geometry,meshMaterial);
            cone3.doubleSided = true;
            cone3.overdraw = true;
            scene.add(cone3);
            cone1.position.set(2*k, 2*j,lc_relationship.sensor1[i].z_cordinate);
            cone2.position.set(2*k, 2*j,lc_relationship.sensor2[i].z_cordinate);
            cone3.position.set(2*k, 2*j,lc_relationship.sensor3[i].z_cordinate);
           }

我只想显示如下图所示的锥体：

以及剩下的代码：

var light = new THREE.DirectionalLight(0xffffff, 0.6);
light.position.y = 1;
light.position.x = 1;
light.position.z = 1;
scene.add(light);
light = new THREE.DirectionalLight(0xffffff, 0.6);
light.position.y = -1;
light.position.x = -1;
light.position.z = -1;
scene.add(light);
light = new THREE.DirectionalLight(0xffffff, 0.6);
light.position.y = 1;
light.position.x = 0;
light.position.z = 0;
scene.add(light);
container.appendChild( renderer.domElement );
}
 function animate() 
{   
requestAnimationFrame( animate );
render();   
}
  function render() 
{                           
renderer.render(scene, camera);
}

可以帮助解决这个问题。这个任务真的一直都在头上 :(

Answer 1

你可以用一个循环来完成，通过从j 计算j 和k 而不是再添加两个循环：

for ( var i = 0; i <nSize; i++)
{
    var k = i%10,
        j = (i-k)/10;

    j = j*2 - 10; // You may need to adjust this "10",
    k = k*2 - 10; // may be "9", so the layers get centered.

    //console.log(j,k)
    var cone1 = new THREE.MESH(lc_relationship.sensor1[i].Geometry,meshMaterial);
    cone1.doubleSided = true;
    cone1.overdraw = true;
    scene.add(cone1);
    var cone2 = new THREE.MESH(lc_relationship.sensor2[i].Geometry,meshMaterial);
    cone2.doubleSided = true;
    cone2.overdraw = true;
    scene.add(cone2);
    var cone3 = new THREE.MESH(lc_relationship.sensor3[i].Geometry,meshMaterial);
    cone3.doubleSided = true;
    cone3.overdraw = true;
    scene.add(cone3);
    cone1.position.set(j, k, lc_relationship.sensor1[i].z_cordinate);
    cone2.position.set(j, k, lc_relationship.sensor2[i].z_cordinate);
    cone3.position.set(j, k, lc_relationship.sensor3[i].z_cordinate);
}