Я застрял с загрузкой в двух моделях .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?