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

请仅检查str =＆＃34; 0＆＃34;因为现在我只用一个id进行测试

Answer 1

只是为了抓住这个想法：你可以通过这样的AJAX请求加载内容：

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

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

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

1 个答案: