如何在 Three.js 中加载带有三角形和（孤立）顶点的 PLY 网格？

Question

我想在 Three.js 中显示一个包含三角形和孤立顶点的对象。它以 PLY 编码。我使用 THREE.Mesh 显示三角形，使用 THREE.Points 显示点，将相同的geometry 对象提供给两者。但是，只显示属于三角形的顶点。

我还做了一个测试，我保留了顶点，但删除了 PLY 文件中的所有三角形（面）。在那种情况下，所有的顶点都会显示出来......

我该怎么做才能两者兼得？

我包含一个小的测试 PLY 文件，它有 4 个顶点，其中 3 个属于三角形。如果您使用此代码加载它，您会看到仅显示三角形中的 3 个顶点。

const meshString = `ply
format ascii 1.0
element vertex 4
property float x
property float y
property float z
element face 1
property list uchar int vertex_indices
element edge 0
property int vertex1
property int vertex2
end_header
-1 1 0.000000 
1 1 0.000000 
1 -1 0.000000 
-1 -1 0.000000 
3 0 1 3
`;
const loader = new THREE.PLYLoader();
geometry = loader.parse( meshString );
const meshPoints = new THREE.Points( geometry, pointsMaterial );
scene.add(meshPoints);

编辑 1

这是一张图片，显示了我想要得到的，以及我实际得到的：

编辑 2

我做了一个CodePen 显示问题。

编辑 3

我发现了问题，但我仍然很想知道是否有好的解决方案。如果有面，PLYLoader 会创建一个索引，并且该索引仅包含属于面的顶点。如果没有面，index=null，我们得到所有的顶点。使用geometry.toNonIndexed 创建不带索引的几何版本没有帮助，因为只保留了属于面的顶点。一种解决方案是手动设置geometry.index=null，在这种情况下会渲染缺失的顶点。

Answer 1

一种解决方案是创建几何图形的克隆并设置geometry.index=null，如编辑#3 中所示。但是，这将制作顶点的副本。为防止这种情况，请这样做：

const loader = new THREE.PLYLoader();
const geometry = loader.parse(meshString);

// the mesh: for displaying the triangles
mesh = new THREE.Mesh(geometry, Mesh.meshMaterial);
scene.add(mesh);

// the points: even those outside triangles
const geometry2 = geometry.clone(); // clone the original geometry
geometry2.index = null; // do not use indexing
geometry2.attributes.position = geometry.attributes.position; // use the same vertices as the original mesh
meshPoints = new THREE.Points( geometry2, Mesh.pointsMaterial );
scene.add(meshPoints);