Javascript Three.js中的多个场景和多个.obj模型

我一直在将两个.obj模型加载到两个不同的div元素中。 目前，这两个对象都位于最后一个div元素中，如下所示：

我的代码基于以下示例：

我创建了一个阵列，模型存储在：

        var canvas;
        var scenes = [], renderer;
        var scene;

        //external geometries
        var models = {
                    tent: {
                        obj:"./assets/Tent_Poles_01.obj",
                    },
                    campfire: {
                        obj:"./assets/Campfire_01.obj",
                    }}

        init();
        animate();

然后，我将它们加载到init（）中的一个循环中：

并在此处渲染它们：

            renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
            renderer.setClearColor( 0xffffff, 1 );
            renderer.setPixelRatio( window.devicePixelRatio );

---

为什么这两个模型最终都会出现在最后一个div中？

尝试删除该全局变量

var场景并实例化循环内的场景，在其中加载模型：使用
var scene=new THREE.scene（）而不是
scene=new THREE.scene（）。不会更改任何内容。这可能与我只实例化一个渲染器的事实有关吗？看一看……就是这样！非常好用，谢谢。我希望我能问另一个问题-我有六个“预制”容器（见下文），我想用一个模型和描述填充每个容器。有办法吗<代码>文本
我上面使用的示例代码在JavaScript中创建了div容器。我是制作一张大画布还是每个画布都需要制作一张？
            renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
            renderer.setClearColor( 0xffffff, 1 );
            renderer.setPixelRatio( window.devicePixelRatio );