Question

我很难将两个.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中结束？

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

0 个答案: