Javascript 使用three.js多次显示同一3D对象

我正在使用Three.js javascript库。为了测试它，我从下载了一个示例

我尝试使用for循环多次显示同一元素。有两个问题与（，）相关，但这并不是我想要的。我的问题是，如果我在循环中创建元素，它将只显示迭代的最后一个元素。在这种特殊情况下，元件处于位置（12,12）

但是，如果我执行一个类似警报的操作，它将显示所有元素。另外，如果我有任何其他函数延迟执行

我看到一些示例正在运行，如mrdoob示例，但我希望此代码能够运行，因为我需要加载多个网格，而不是生成基本图形

//将场景、摄影机和渲染器设置为全局变量。
var场景、摄影机、渲染器；
var组；
//调用函数
init（）；
制作动画（）；
//设置场景。
函数init（）{
//迭代器
varⅠ，j；
//创建场景并设置场景大小。
场景=新的三个。场景（）；
变量宽度=window.innerWidth，
高度=窗内高度；
//创建渲染器并将其添加到DOM中。
renderer=new THREE.WebGLRenderer（{antialas:true}）；
设置大小（宽度、高度）；
document.body.appendChild（renderer.doElement）；
//创建一个摄影机，将其从模型中缩小一点，然后将其添加到场景中。
摄像机=新的三个透视摄像机（45，宽/高，0.12000）；
摄像机位置设置（0,20,20）；
场景。添加（摄影机）；
//创建一个事件侦听器，该侦听器使用浏览器窗口调整渲染器的大小。
addEventListener（'resize'，function（））{
变量宽度=window.innerWidth，
高度=窗内高度；
设置大小（宽度、高度）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
});
//设置场景的背景色。
setClearColor（0x333F47，1）；
//创建灯光，设置其位置，然后将其添加到场景中。
var灯=新的三点灯（0xffffff）；
灯。位置。设置（-100200100）；
场景。添加（灯光）；
group=new THREE.Object3D（）；
对于（i=0；i<15；i+=3）{
对于（j=0；j<15；j+=3）{
var loader=new THREE.JSONLoader（）；
loader.load（“models/treehouse_logo.js”，函数（几何）{
var material=new THREE.MeshLambertMaterial（{color:0x55B663}）；
var mesh=新的三个网格（几何体、材质）；
网格位置集（i，0，j）；
组。添加（网格）；
});
//警报（“迭代”+i+“”+j）；
}
}
场景。添加（组）；
//添加轨道控件，以便我们可以用鼠标四处平移。
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
}
//渲染场景并根据需要更新渲染。
函数animate（）{
//阅读有关requestAnimationFrame的更多信息，请访问http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
请求动画帧（动画）；
//渲染场景。
渲染器。渲染（场景、摄影机）；
控件更新（）；
}

您在这里所做的工作效率极低：

  for(i=0; i < 15; i+=3) {
    for(j=0; j < 15; j+=3) {

      var loader = new THREE.JSONLoader();
      loader.load( "models/treehouse_logo.js", function(geometry){
        var material = new THREE.MeshLambertMaterial({color: 0x55B663});
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(i,0,j);
        group.add(mesh);
      });
    //alert("iteration"+i+" "+j);
    }
  }

（i=0；i<15；i+=3）的

{
对于（j=0；j<15；j+=3）{
var loader=new THREE.JSONLoader（）；
loader.load（“models/treehouse_logo.js”，函数（几何）{
var material=new THREE.MeshLambertMaterial（{color:0x55B663}）；
var mesh=新的三个网格（几何体、材质）；
网格位置集（i，0，j）；
组。添加（网格）；
});
//警报（“迭代”+i+“”+j）；
}
}

这样做会更好（未经测试）：

var-loader=new THREE.JSONLoader（）；
loader.load（“models/treehouse_logo.js”，函数（几何）{
变量材质、网格、i、j、实例；
材质=新的三个.MeshLambertMaterial（{color:0x55B663}）；
网格=新的三个网格（几何体、材质）；
对于（i=0；i<15；i+=3）{
对于（j=0；j<15；j+=3）{
instance=mesh.clone（）；
实例位置集（i，0，j）；
添加（实例）；
}
}
});

您需要为每个唯一的网格重复此图案

您当前的方法存在以下问题：

• GPU为每个相同网格需要更多内存
• 浏览器需要更多内存来记住每个相同的网格
• GPU需要更多的处理能力，因为需要处理更多的内存
• 每次调用加载程序时，都会指示浏览器执行请求。在你的情况下，大约有25个相同的请求。它们应该来自缓存，但速度仍然很慢
• 您可能也有变量范围问题，这会导致加载程序回调出现问题，但我不完全确定这一点

---

顺便说一句，alert（）是一个非常糟糕的调试工具，因为它改变了浏览器的反应方式：当alert打开时，它停止执行JavaScript，这会影响加载程序和类似的事情。您最好使用日志记录方法。

您在这里所做的工作效率极低：

  for(i=0; i < 15; i+=3) {
    for(j=0; j < 15; j+=3) {

      var loader = new THREE.JSONLoader();
      loader.load( "models/treehouse_logo.js", function(geometry){
        var material = new THREE.MeshLambertMaterial({color: 0x55B663});
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(i,0,j);
        group.add(mesh);
      });
    //alert("iteration"+i+" "+j);
    }
  }

（i=0；i<15；i+=3）的

{
对于（j=0；j<15；j+=3）{
var loader=new THREE.JSONLoader（）；
loader.load（“models/treehouse_logo.js”，函数（几何）{
var material=new THREE.MeshLambertMaterial（{color:0x55B663}）；
var mesh=新的三个网格（几何体、材质）；
网格位置集（i，0，j）；
组。添加（网格）；
});
//警报（“迭代”+i+“”+j）；
}
}

这样做会更好（未经测试）：

var-loader=new THREE.JSONLoader（）；
loader.load（“models/treehouse_logo.js”，函数（几何）{
变量材质、网格、i、j、实例；
材质=新的三个.MeshLambertMaterial（{color:0x55B663}）；
网格=新的三个网格（几何体、材质）；
对于（i=0；i<15；i+=3）{
对于（j=0；j<15；j+=3）{
instance=mesh.clone（）；
实例位置集（i，0，j）；
添加（实例）；
}
}
});

你需要重复这个动作

  group = new THREE.Object3D();
      var loader = new THREE.JSONLoader();
      loader.load( "models/treehouse_logo.js", function(geometry){
        var material = new THREE.MeshLambertMaterial({color: 0x55B663});
        for(i=0; i < 15; i+=3) {
          for(j=0; j < 15; j+=3) {
            var mesh = new THREE.Mesh(geometry.clone(), material);
            mesh.position.set(i,0,j);
            group.add(mesh);
          }
        }
      });
  scene.add( group );