three.js - 无面点云 (PLY) 文件的 Web 查看器

Question

我正在尝试 Three.Js用于使用 this example 浏览 PLY 文件作为引用。我的 PLY 文件只是点云，只有顶点，没有面。 ThreeJs 似乎也需要面来创建用于渲染的几何体。 ThreeJS 的替代品是什么，或者我如何在线显示这些文件？

--UPDATE--

基于此SO answer ，我将 PLY 文件转换成 JSON 格式，看起来像

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",
...
];

代码是这样的

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

}

但是，它无法呈现任何内容。

Update 2

它没有渲染任何东西的原因是因为缺少这一行renderer.render(scene, camera);。更新了代码并像魅力一样工作。

Answer 1

  const loader = new PLYLoader();
  loader.load('/dataset/format/00000012.ply', function ( geometry ) {
    var material = new THREE.PointsMaterial( { size: 0.005 } );
    material.vertexColors = true //if has colors geometry.attributes.color.count > 0
    var mesh = new THREE.Points(geometry, material)
    scene.add(mesh)
  } );