Three.js ply loader - 对象渲染不正确

Question

我是 three.js 的初学者，我正在使用 Angular 13 和 three.js v0.137.0。我正在尝试从数据 URL 加载和预览层文件。当对象被渲染时，它只显示像屏幕截图中那样的线条。 screenshot - how the ply file renders.

我从 https://threejs.org/editor and it loads the same .ply file perfectly. how the file renders in three.js editor

的编辑器中导入了我试图预览的 .ply 文件

我做错了什么？

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

}

Answer 1

this.mesh = new THREE.Mesh(geometry, new THREE.PointsMaterial( { size: 0.01, vertexColors: true } ));

由于您正在加载点云，因此创建 THREE.Mesh 的实例是不正确的。请改用 THREE.Points。

当几何表示点云时也不需要调用computeVertexNormals()。

Three.js ply loader - 对象渲染不正确

Three.js ply loader - object not rendered properly

javascript

three.js

angular