动态加载div中的数据three.js

Question

我有一个three.js脚本，我在其中嵌入Dom元素。首先我创建了一个iframe结构，然后动态地将数据加载到它。但现在我想在div标签中加载相同的数据并删除iframe。因此，我试图做到这一点，但该div无法获取数据。

var SCREEN_WIDTH, SCREEN_HEIGHT, scene,raycaster; 
var mouse = new THREE.Vector2(), INTERSECTED; 
$(function(){ 
    var camera, renderer; 
    var mpi=Math.PI /180; 
    var circleRadius = 1800; 
    var startAngle = 0; 
    var centerX = 0; 
    var centerZ = 0; 
    var particles = []; 
    var startRadians = startAngle + mpi; 
    var totalSpheres = 15; 
    var incrementAngle = 360/totalSpheres; 
    var incrementRadians = incrementAngle * mpi; 

    function createCssrenderer() { 
    var container = document.getElementById('container'); 
    var renderer = new THREE.CSS3DRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight*.85); 
    renderer.domElement.style.position = 'absolute'; 
    renderer.domElement.style.top = 0; 
    container.appendChild(renderer.domElement); 
    return renderer; 
    } 

    function createPlane(position, rotation) { 
    var material = new THREE.MeshBasicMaterial({ 
     color: 0x000000, 
     opacity: 0.7, 
     side: THREE.DoubleSide 
    }); 
    var geometry = new THREE.PlaneGeometry(w, h); 
    var mesh = new THREE.Mesh(geometry.center(), material); 
    mesh.position.x = position.x; 
    mesh.position.y = position.y; 
    mesh.position.z = position.z; 

    return mesh; 
    } 



    var Element = function (id, w, h, position, rotation) { 
    var html = [ 
     '<div class="wrapper" width="' + w + '" height="' + h + '" >', 
     '<ul class="stage clearfix">', 
     '<li class="scene" id="' + id + '">', 

     '</li>', 
     '</ul>', 
     '</div>' 
    ].join('\n'); 
    var div = document.createElement('div'); 
    $(div).html(html); 

    //div.style.backgroundColor = '#000'; 
    var object = new THREE.CSS3DObject(div); 
    object.position.x = position.x; 
    object.position.y = position.y; 
    object.position.z = position.z; 
    object.rotation.x = rotation.x; 
    object.rotation.y = rotation.y; 
    object.rotation.z = rotation.z; 
    return object; 
    var plane = createPlane(

     position, 
     rotation); 
    glscene.add(plane); 
    } 

    init(); 
    animate(); 
    function init() { 
    scene = new THREE.Scene(); 
    renderer = createCssrenderer(); 
    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 10); 

    camera.position.set(-100,60,4000); 

    var group = new THREE.Group(); 
    var str = {"0":"<object type='type/html' data='http://localhost/liberate/threeee/PAGES/Information/content.html'></object>", 
     "1":"http://localhost/liberate/threeee/PAGES/Information/pages/3.html", 
     "2":"http://localhost/liberate/threeee/PAGES/Information/pages/4.html", 
     "3":"http://localhost/liberate/threeee/PAGES/Information/pages/3.html", 
     "4":"http://localhost/liberate/threeee/PAGES/Information/pages/5.html", 
     "5":"http://localhost/liberate/threeee/PAGES/Information/pages/6.html", 
     "6":"http://localhost/liberate/threeee/PAGES/Information/pages/7.html", 
     "7":"http://localhost/liberate/threeee/PAGES/Information/pages/8.html", 
     "8":"http://localhost/liberate/threeee/PAGES/Information/pages/9.html", 
     "9":"http://localhost/liberate/threeee/PAGES/Information/pages/10.html", 
     "10":"http://localhost/liberate/threeee/PAGES/Information/pages/11.html", 
     "11":"http://localhost/liberate/threeee/PAGES/Information/pages/12.html", 
     "12":"http://localhost/liberate/threeee/PAGES/Information/pages/13.html", 
     "13":"http://localhost/liberate/threeee/PAGES/Information/pages/books/14.html", 
     "14":"http://localhost/liberate/threeee/PAGES/Information/pages/3.html", 
     "15":"http://localhost/liberate/threeee/PAGES/Information/pages/3.html", 
     "16":"http://localhost/liberate/threeee/PAGES/Information/pages/3.html" 
    } 

    for (var i = 0; i < totalSpheres; i ++) { 
     var xp = centerX + Math.sin(startRadians) * circleRadius; 
     var zp = centerZ + Math.cos(startRadians) * circleRadius; 
     group.add(new Element(str[i], 1000, 1000, new THREE.Vector3(xp, 0, zp), new THREE.Vector3(0, i*incrementAngle * (Math.PI/180.0), 0))); 
     startRadians += incrementRadians; 
     particles.push(group); 

    } 
    scene.add(group); 

    controls = new THREE.OrbitControls(camera, renderer.domElement); 
    } 

    function animate() { 
    requestAnimationFrame(animate); 
    renderer.render(scene, camera); 
    } 
}); 

请检查只有海峡=“0”，因为现在我有一个ID只测试

Answer 1

刚好赶上这个想法：

var counter = 0; 
function dataLoadedHandler(key, data) { 
    counter--; 
    this[key] = data; 
    if (counter === 0) { 
     loadComplete(); 
    } 
} 

function loadComplete() { 
    // Do what you want with loaded data here... i.e. put it into DOM tree 
} 

for (var key in str) { 
    counter++; 
    $.get(str[key], dataLoadedHandler.bind(str, key), "text"); 
} 

：您可以通过AJAX请求这样装入内容

当然，你可以找到更好的解决方案来管理异步队列，只是一个简单的例子。