I'm a beginner to three.js and I'm using Angular 13 with three.js v0.137.0. I'm trying to load and preview a ply file from a data URL. When the object is rendered, it is only showing like lines as in the screenshot. screenshot - how the ply file renders.

I imported the .ply file that I'm trying to preview from the editor at https://threejs.org/editor and it loads the same .ply file perfectly. how the file renders in three.js editor

What am I doing wrong here?

public createScene(canvas: ElementRef<HTMLCanvasElement>, source: string): void {
const dataURL = `data:application/octet-stream;base64,${source}`;
this.canvas = canvas.nativeElement;

this.renderer = new THREE.WebGLRenderer({
  canvas: this.canvas,
  alpha: true,    // transparent background
  antialias: true // smooth edges
});
this.renderer.setSize((window.innerWidth / 2), (window.innerHeight / 2));

this.scene = new THREE.Scene();

this.light = new THREE.AmbientLight(0x443333);
this.light.position.z = 10;

this.camera = new THREE.PerspectiveCamera(
  45, window.innerWidth / window.innerHeight, 0.1, 1000
);

this.camera.position.z = 0.5;
this.renderer.setSize((window.innerWidth / 2), (window.innerHeight / 2));
this.scene.add(this.camera);
this.scene.add(this.light);
if (source) {
  this.loader.load(dataURL, (geometry) => {
    geometry.center();
    geometry.computeVertexNormals();
    this.mesh = new THREE.Mesh(geometry, new THREE.PointsMaterial( { size: 0.01, vertexColors: true } ));
    this.scene.add(this.mesh);
  });
}

}