Web viewer for point cloud (PLY) file without faces

问题

I am trying Three.Js for web viewing of PLY files using this example as reference. My PLY file is just Point Cloud with only vertices and NO faces. It seems that ThreeJs needs faces as well for creating geometry for rendering. What is the alternate to ThreeJS or how do I display these files online?

--UPDATE--

Based on this SO answer, I converted the PLY file into a JSON format which looks like

var data = [
"-4.3529 -5.92232 21.9669", // x, y, z
"108 99 74",                // r, g, b
"-4.25362 -5.98312 22.0832",
"110 88 61",
"-3.85865 -6.05025 22.3349",
...
];

and the code goes like

<script>
var scene, camera, renderer;
var geometry, material;

start();

function start() {

    $.ajax({
  'type':'GET',
  'url':'http://xxxx.xxxx.com/xxx/lol.json',
  'dataType':'json',
  'contextType': 'text/plain',
  'crossDomain': true,
  'xhrFields': { 'withCredentials': true },
  'success':function(msg) {
      init(msg);
    }
    });
}

function init(data) {

  console.log(data);
  /*
   */

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 10000;


    var geometry = new THREE.Geometry();
    var colors = [];

    for ( var x = 0; x < data.length; x = x+2){
      var pointCoord = data[ x ].split(" ");
      var colorDets = data[ x+1 ].split(" ");
      if ( pointCoord.length != 3 || colorDets.length != 3) continue;
      var currentColor = new THREE.Color( colorDets[0], colorDets[1], colorDets[2] );
      colors.push( currentColor );
      geometry.vertices.push(
        new THREE.Vector3(pointCoord[2], pointCoord[1], pointCoord[0])
      );
    };
    console.log( colors.length);
    console.log( geometry.vertices.length );

    geometry.colors = colors;

    var material = new THREE.PointCloudMaterial( { size: 1, vertexColors: THREE.VertexColors } );

    particleSystem = new THREE.PointCloud( geometry, material );
    scene.add( particleSystem );
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

}

However, it fails to render anything.

Update 2

The reason it was not rendering anything was because this line was missing renderer.render(scene, camera);. Updated the code and works like charm.

来源：https://stackoverflow.com/questions/31937341/web-viewer-for-point-cloud-ply-file-without-faces

标签

three.js

point-clouds