Question

我对three.js相当新，遇到问题我无法找到答案。

这是一个应该总结情况的代码：http://codepen.io/anon/pen/PPYPzO

var container, stats;
var camera, controls, scene, renderer, raycaster, mouse;

init();
animate();
add_world();

var indie_render = true;
for(var j = 0; j < 20; j++){
  add_objects(20);
  indie_render = !indie_render;
  console.log("adding more objects...");
  if(!indie_render){render();}
}


function add_world(){
  var geometry = new THREE.BoxGeometry( 1000, 1000, 1000);
  var mesh = new THREE.MeshBasicMaterial( {color: 0xf5f5dc, wireframe: false, opacity: 0.2, transparent:true } );
  var world = new THREE.Mesh( geometry, mesh );
  scene.add( world );
  render();
}

function add_objects(num, indiv){
  var geometry = new THREE.SphereGeometry( 5, 32,32 );
  var material = new THREE.MeshBasicMaterial( { shading: THREE.FlatShading } );
  material.color.setRGB( Math.random(), Math.random(), Math.random() );
  for ( var i = 0; i < num; i ++ ) {
    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.x = ( Math.random() - 0.5 ) * 1000;
    mesh.position.y = ( Math.random() - 0.5 ) * 1000;
    mesh.position.z = ( Math.random() - 0.5 ) * 1000;
    mesh.updateMatrix();
    mesh.matrixAutoUpdate = false;
    scene.add( mesh );
    if(indie_render){
      console.log("individual render");
      render();
    }
  }
}

function init() {
  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
  camera.position.set(500, 500, -1000);
    camera.up.set( 0, 1, 0 );
    camera.lookAt(500,500,500);
  controls = new THREE.OrbitControls( camera );
  controls.addEventListener( 'change', render );

  //world
  scene = new THREE.Scene();

  // lights
  light = new THREE.DirectionalLight( 0xffffff );
  light.position.set( 1, 1, 1 );
  scene.add( light );

  light = new THREE.DirectionalLight( 0x002288 );
  light.position.set( -1, -1, -1 );
  scene.add( light );

  light = new THREE.AmbientLight( 0x222222 );
  scene.add( light );

  renderer = new THREE.WebGLRenderer( { antialias: false } );
  renderer.setClearColor( 0x000000, 1 );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.sortObjects = false;
  container = document.getElementById( 'container' );
  container.appendChild( renderer.domElement );

  mouse = new THREE.Vector2();
  raycaster = new THREE.Raycaster();
  container.addEventListener( 'mousemove', onMouseMove, false );
  container.addEventListener( 'mousedown', onMouseDown, false );
  window.addEventListener( 'resize', onWindowResize, false );

}

function animate() {
  requestAnimationFrame( animate );
  controls.update();
}

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


function onMouseMove( e ) {
  mouse.x = ( e.clientX / renderer.domElement.width ) * 2 - 1;
  mouse.y = - ( e.clientY / renderer.domElement.height ) * 2 + 1;
}

function onMouseDown( e ) {
  mouse.x = ( e.clientX / renderer.domElement.width ) * 2 - 1;
  mouse.y = - ( e.clientY / renderer.domElement.height ) * 2 + 1;

  if(e.button == 2){    //right button
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( scene.children, true );
    if ( intersects.length > 0 ) {
      var geometry = new THREE.SphereGeometry( 5, 32,32 );
      var material = new THREE.MeshBasicMaterial( { color:0xff0000, shading: THREE.FlatShading } );
      var mesh = new THREE.Mesh( geometry, material );
      mesh.position.set(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);
      scene.add(mesh);
      render();
    }
  }
}

在这个演示中，我将init（）和animate（）一个空白场景，然后添加一个半透明的立方体，遵循似乎是惯例。然后我在嵌套的for循环中向场景中添加一组球体，随机将球体放置在立方体内，并在每次scene.add（）调用后进行render（）调用。

目前，场景添加所有球体，然后只有用户可以看到，即使我可以在添加for循环对象后添加单个对象（通过右键单击多维数据集）。我需要让用户能够在添加球体时观看，而不是等待整个事情的完成。

我意识到这可能不是渲染场景的最有效方法，但是，例如，如果要设置动画的对象的信息是从服务器异步到达的话，那将非常有用。有没有人有建议？

由于

如何在添加对象或对象组后使three.js更新场景？

0 个答案: