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);
});
}
}
CodePudding user response:
this.mesh = new THREE.Mesh(geometry, new THREE.PointsMaterial( { size: 0.01, vertexColors: true } ));
Since you are loading a point cloud, it's not correct to create an instance of THREE.Mesh
. Use THREE.Points
instead.
There is also no need to call computeVertexNormals()
when the geometry represents a point cloud.