Несколько сцен и несколько моделей .obj в Three.js - PullRequest
0 голосов
/ 18 мая 2018

Я застрял с загрузкой в ​​двух моделях .obj в двух разных элементах div.В настоящее время оба объекта попадают в последний элемент div, как показано здесь:

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

Мой код основан на следующем примере:

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

Я создаю массив с моими моделями, которые хранятся в:

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

    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);
                },
            );
}

И отображаю их здесь:

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

Почему обе модели попадают в последний div?

...