Javascript 如何在不同的div中渲染不同的模型？

（我刚接触过Three.js）

---

描述 我正在为多个stl模型开发3D查看器。每个模型都应该在一个单独的div中渲染，因此您将得到一个具有不同模型的网格。 文件名存储在json文件中。使用for循环，我循环json并将文件名存储在“var filename”中。我使用该变量来完成模型的路径

---

细节 通过for循环，我能够从json文件中获取所有文件名

loader.load('model/' + filename, function(geometry) {...

然后添加文件名以完成模型路径

modelContainer = document.createElement('div');
modelContainer.className = modelClass;
document.getElementById(modelId).appendChild(modelContainer);

在具有给定ID的div内创建一个具有类名的div。模型应渲染到div（具有类的div）内的画布中

---

问题 现在发生的是，代码将所有模型（本例中为3个模型）放入最后一个div中。用于模型1和2的前两个div是黑色的

经过大量的实验和分析，我还没有找到解决办法。也许我必须将所有场景存储在一个数组中，然后在渲染函数中循环所有场景

---

完整的Html和Javascript 您可以在此处找到完整的项目代码（不含.stl模型）：

var modelDiv=document.getElementById（'modelGrid'）；
var ourRequest=new XMLHttpRequest（）；
//在这段代码中，我将从json中读取模型文件名。
//添加存储json的URL
我们的请求。打开（'GET'，'http://localhost:8888/3D%20Modeling/3D%20Previewer/3D%20Previewer%20Library/models.json');
ourRequest.onload=函数（）{
var queueData=JSON.parse（ourRequest.responseText）；
renderHTML（队列数据）；
};
ourRequest.send（）；
函数renderHTML（数据）{
//三维模型处理
if（WEBGL.isWebGLAvailable（）==false）{
document.body.appendChild（WEBGL.getWebGLErrorMessage（））；
}
//可编辑
var-divWidth=300；
高度=300；
var modelId='modelGrid'；
var modelClass='col sm'；
//不要改变
var模型容器；
var摄影机、摄影机目标、场景、渲染器；
var cameraFov=45；
init（数据）；
制作动画（）；
//初始化
函数初始化（数据）{
//json文件中每个模型的For循环
对于（i=0；i

问题在于，您只保存和渲染单个three.js渲染器。在for循环中，此行将覆盖全局

renderer

变量，该变量在

render（）

函数中引用：

renderer = new THREE.WebGLRenderer({
    antialias: true
});

有几种方法可以解决此问题，包括将渲染器和摄影机添加到阵列中，并在单个渲染函数中对其进行迭代，或为每个渲染器创建一个新的

animate（）

循环等。下面是第二个选项的粗略示例：

// For loop for every model in the json file
for (i = 0; i < data.length; i++) {

    var filename = data[i].Filename;

    // EDIT Fix3: These variables must be defined inside of the for loop 
    // scope otherwise they will be shared by all loop iterations
    var modelContainer;
    var camera, cameraTarget, scene;

    // ...

    // Fix 1: Add var declaration so the variable is scoped to this
    // block and variables are not defined globally and overwritten on
    // subsequent iterations. This is needed for all the variables
    // in this block (scene, camera, etc)
    // renderer
    var renderer = new THREE.WebGLRenderer({
        antialias: true
    });

    // ...

    // Fix 2: Create an animation loop for each renderer instead
    // of a single global one
    // animate
    function animate() {
        render();
        requestAnimationFrame(animate);
    }

    // render
    function render() {
        renderer.setClearColor(0xffffff);
        var timer = Date.now() * 0.0005;
        camera.position.x = Math.cos(timer) * 3;
        camera.position.z = Math.sin(timer) * 3;
        camera.lookAt(cameraTarget);
        renderer.render(scene, camera);
    }

    animate();    

}

//json文件中每个模型的For循环
对于（i=0；irenderer = new THREE.WebGLRenderer({
    antialias: true
});

// For loop for every model in the json file
for (i = 0; i < data.length; i++) {

    var filename = data[i].Filename;

    // EDIT Fix3: These variables must be defined inside of the for loop 
    // scope otherwise they will be shared by all loop iterations
    var modelContainer;
    var camera, cameraTarget, scene;

    // ...

    // Fix 1: Add var declaration so the variable is scoped to this
    // block and variables are not defined globally and overwritten on
    // subsequent iterations. This is needed for all the variables
    // in this block (scene, camera, etc)
    // renderer
    var renderer = new THREE.WebGLRenderer({
        antialias: true
    });

    // ...

    // Fix 2: Create an animation loop for each renderer instead
    // of a single global one
    // animate
    function animate() {
        render();
        requestAnimationFrame(animate);
    }

    // render
    function render() {
        renderer.setClearColor(0xffffff);
        var timer = Date.now() * 0.0005;
        camera.position.x = Math.cos(timer) * 3;
        camera.position.z = Math.sin(timer) * 3;
        camera.lookAt(cameraTarget);
        renderer.render(scene, camera);
    }

    animate();    

}