加载没有面的 PLY 文件 - Three.js答案

【问题标题】：Loading PLY files without faces - Three.js加载没有面的 PLY 文件 - Three.js
【发布时间】：2016-08-30 12:56:54
【问题描述】：

我正在开发一个 Web 服务，其主要功能解决了显示二进制 .ply 文件的问题。为了打开和可视化点云，我使用 Three.js 的 PLYLoader。我用它来展示来自互联网的示例文件并且它有效。但是当我尝试附加我的 .ply 文件时，它没有。我正在使用 Three.js，因为我需要我的显示是最佳的，我的文件至少是 70mb。

此处为 .ply 文件示例： https://onedrive.live.com/redir?resid=7DDB287362EDFD5A!761&authkey=!AOHxkZk-6etH--0&ithint=file%2cply

我注意到我拥有的 .ply 文件与我之前显示的 .ply 文件有点不同。在我的文件中没有面孔只有点。

所以基本上我的问题是“是否可以使用 Three.js 显示点云？或者我应该使用其他库吗？如果可以的话，有人可以帮助我配置我的代码以使其正常工作吗？

这是我支持 .ply 文件的脚本：

        var cameraControls;
        var container = document.getElementById("three");
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, container.offsetWidth / container.offsetHeight, 0.1, 1000 );
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( container.offsetWidth, container.offsetHeight );
        document.getElementById("three").appendChild( renderer.domElement );
        cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
        cameraControls.target.set( 0, 0, 0 );
        cameraControls.addEventListener( 'change', render );
        var geometry = new THREE.BoxGeometry( 3, 3, 3 );
        var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( geometry, material );
        var loader = new THREE.PLYLoader();
            loader.load( 'resources/cube.ply', function ( geometry ) {

                geometry.computeFaceNormals();

                var material = new THREE.MeshStandardMaterial( { color: 0x0055ff } );
                var mesh = new THREE.Mesh( geometry, material );

                mesh.position.y = - 0.25;
                mesh.rotation.x = - Math.PI / 2;
                mesh.scale.multiplyScalar( 1 );

                mesh.castShadow = true;
                mesh.receiveShadow = true;

                scene.add( mesh );

            } );
        var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
        var light = new THREE.AmbientLight( 0x404040 ); // soft white light
        scene.add( light );
        directionalLight.position.set( 0, 1, 0 );
        scene.add( directionalLight );
        camera.position.z = 5;
        function render() {
            requestAnimationFrame( render );
            renderer.render( scene, camera );
        }
        render();

【问题讨论】：

尝试更具体地了解您遇到的问题。目前还不清楚你在问什么
希望这次更新能解释一下 ;)
标签ply适用于“用于Python的lex和yacc解析工具的实现”。我认为这与这个问题没有任何关系。（引用来自标签文本，如果您将鼠标悬停在标签上，您会看到它。）
感谢编辑 ;)
即使我的层没有面（“element face 0”）并且只有element vertex PLYLoader 在threejs 0.121 上“工作” - 但不是显示点，而是显示三角形。颜色也被忽略了

标签： javascript loader ply-file-format

【解决方案1】：

使用THREE.MeshNormalMaterial。出于某种奇怪的原因，它使用 MeshNormalMaterial 加载纹理

【讨论】：

【解决方案2】：

使用点材料和点

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

【讨论】：