Multiple scenes and multiple .obj models in Three.js

Question

I am stuck with loading in two .obj models into two different div elements. Currently, both objects end up in the last div element, as seen here:

https://casagroupproject.github.io/template1/test.html

My code is based on this example here:

https://threejs.org/examples/?q=mul#webgl_multiple_elements

I create an array with my models stored in:

        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();

I then load them in a loop in init():

    for( var _key in models ){

            scene = new THREE.Scene();

            var element = document.createElement( "div" );
            element.className = "list-item";
            element.innerHTML = template.replace( '$', _key);
            console.log('does this work', element.innerHTML);

            scene.userData.element = element.querySelector( ".scene" );

            content.appendChild( element );

            var camera = new THREE.PerspectiveCamera( 50, 1, 1, 10 );
            camera.position.z = 2;
            scene.userData.camera = camera;     

            var objLoader = new THREE.OBJLoader();

            objLoader.load(
                models[_key].obj,
                function ( object ) {
                    scene.add( object );
                    console.log(object);
                },
            );
}

And render them here:

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

Why do both models end up in the last div?

Try to remove that global variable `var scene;` and instantiate scenes inside the loop, where you load your models: use `var scene = new THREE.Scene();` instead of `scene = new THREE.Scene();`. — prisoner849, May 18 '18 at 13:32
Does not change anything unfortunately. Is it possibly related to the fact that I only instantiate one renderer? — emily, May 18 '18 at 13:52
Have a look at that [jsfiddle](https://jsfiddle.net/prisoner849/s99vtm3y/) — prisoner849, May 18 '18 at 14:33
I was hoping I could ask another question- I have six 'prefab' containers (see below) and I want to fill each with one model and a description. Is there a way to do that? `

text
` The example code I used above creates the div container in the JavaScript. Do I make one big canvas or do I need to make a canvas each? — emily, May 18 '18 at 18:47
It's out of the scope of this question, so it's better to make another one with better description of the problem :) — prisoner849, May 18 '18 at 19:31

Multiple scenes and multiple .obj models in Three.js

0 Answers0