Javascript 使用threeJS在单个网页上创建多个STL文件

这里我有一个STL文件，我用threeJS显示。我不知道如何在一个网页中呈现多个STL文件。 这是我的密码：

var容器、摄影机、场景、渲染器；
init（）；
制作动画（）；
函数init（）{
container=document.getElementById（'pratik'）；
文件.正文.附件（容器）；
//渲染器
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.doElement）；
//场面
场景=新的三个。场景（）；
//摄像机
摄像头=新的三个透视摄像头（35，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（3,0.5,3）；
scene.add（camera）；//必需，因为我们正在将灯光作为摄影机的子对象添加
//控制
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
//灯光
添加（新的3.AmbientLight（0x22222））；
var灯=新的三点灯（0xffffff，0.8）；
相机。添加（灯光）；
//反对
var loader=new THREE.STLLoader（）；
loader.load（'files/wolf.stl'，函数（几何体）{
var material=new THREE.MeshPhongMaterial（{color:0xff5533}）；
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
} );
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
var timer=Date.now（）*0.0005；
camera.position.x=数学cos（计时器）*15；
camera.position.z=Math.sin（计时器）*15；
摄像机。注视（场景。位置）；
渲染器。渲染（场景、摄影机）；
}

---

您已经有了加载单个STL文件并将其插入场景的代码。加载多个文件的下一步很简单，只需重用

stloader

实例即可。基本上你可以这样做：

var loader = new THREE.STLLoader();
loader.load( 'FIRSTFILE.stl', function ( geometry ) {
    var material = new THREE.MeshPhongMaterial( { color: 0xff5533 } );
    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
} );

loader.load( 'SECONDFILE.stl', function ( geometry ) {
    var material = new THREE.MeshPhongMaterial( { color: 0xff5533 } );
    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
} );

如果您有一个URL数组可以从中加载STL文件，那么还可以在循环中使用loaders

load（）

方法