topical media & game development

talk show tell print

mobile-query-three-plugins-pointcloud-examples-index.htm / htm



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../../build/tquery-bundle.js"></script>
  
  <script src="../../statsplus/statsmemory.js"></script>
  <script src="../../statsplus/statsdelay.js"></script>
  <script src="../../statsplus/statsthreejswebgl.js"></script>
  <script src="../../statsplus/tquery.statsplus.js"></script>
  
  <body><script>
          var world        = tQuery.createWorld().boilerplate().start();
  //world.removeCameraControls();
  // TODO
  // - add points during the load ?
  // - make it in a plugins
  // - a binary format would be much much smaller
  //   - a converter in node.js ?
  //   - is there a exsting format already ?
  // - make a ASCloader
  // - could be nice to push in three.js
  // - list of cloud github.com/asalga/XB-PointStream/tree/master/clouds
  
          var url        = "clouds/mickey.asc";
          //var url        = "clouds/acorn.asc";
          //var url        = "clouds/eggenburg.asc";
          loadFile(url, function(text, length){
                  // console.log("fully loaded", length, text.length)
                  var lines        = text.split(/\n/);
                  var nPoints        = lines.length;
                  // nPoints        = 1;
                  console.log("nPoints", nPoints)
                  var tGeometry        = new THREE.Geometry();
                  for(var i = 0; i < nPoints; i++){
                          var line        = lines[i];
                          //var line        = lines[lines.length-1];
                          //var fields        = line.split(/\t/);
                          //line        = line.replace(/( |\t)+/, ' ')
                          var fields        = line.split(/\s/);
  //console.log("fields", line, fields) 
                          var positionX        = parseFloat(fields[0]);
                          var positionY        = parseFloat(fields[1]);
                          var positionZ        = parseFloat(fields[2]);
                          var colorHex        = parseInt(fields[3], 10)*0x10000 +
                                                  parseInt(fields[4], 10)*0x100 +
                                                  parseInt(fields[5], 10)*0x1;
                          // update the geometry
                          var vertex        = new THREE.Vector3(positionX, positionY, positionZ);
                          tGeometry.vertices.push( vertex );
                          var color        = new THREE.Color( colorHex );
                          tGeometry.colors.push( color );
                  }
  
                  var tMaterial        = new THREE.ParticleBasicMaterial({
                          color                : 0xffffff,
                          vertexColors        : THREE.VertexColors,
                          size                : 4,
                          sizeAttenuation        : false
                  });
                  var tMesh        = new THREE.ParticleSystem(tGeometry, tMaterial);
                  tQuery(tMesh).addTo(world)
                          .geometry().computeAll().center().normalize().back()
                          .id("obj")
                          .scale(2);
          })
          
          
          function loadFile(url, onLoad, onError, onProgress){
                  var xhr                = new XMLHttpRequest()
                  var length        = 0;
                  xhr.onreadystatechange = function () {
                          if ( xhr.readyState == 4 ) {
                                  if( xhr.status == 200 || xhr.status == 0 ){
                                          console.log("loaded", xhr)
                                          onLoad && onLoad(xhr.response, length);
                                  }else{
                                          console.error("error load [" + url + "] [" + xhr.status + "]" );
                                          onError && onError(xhr.status, xhr);
                                  }
                          } else if ( xhr.readyState == 3 ) {
                                  if ( length == 0 ) {
                                          length = xhr.getResponseHeader( "Content-Length" );
                                  }
                                  //console.log("progress length:", length, "loaded", xhr.response.length)
                                  onProgress && onProgress(xhr.response.length, length)
                          } else if ( xhr.readyState == 2 ) {
                                  length        = xhr.getResponseHeader( "Content-Length" );
                                  //console.log("length", length)
                          }
                  };
                  xhr.open( "GET", url, true );
                  xhr.send( null );                
          }
  </script></body>
  
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.