无面点云 (PLY) 文件的 Web 查看器

问题描述

我正在尝试 Three.Js 使用 作为参考.我的 PLY 文件只是点云，只有顶点和没有面.似乎 ThreeJs 也需要面来创建用于渲染的几何体.ThreeJS 的替代方法是什么?如何在线显示这些文件?

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?

--更新--

基于此 SO 答案，我将 PLY 文件转换为 JSON 格式，如下所示

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

代码如下

<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.

更新 2

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

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

推荐答案

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

这篇关于无面点云 (PLY) 文件的 Web 查看器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！