Soy un principiante en three.js y estoy usando Angular 13 con three.js v0.137.0. Estoy tratando de cargar y obtener una vista previa de un archivo de capas desde una URL de datos. Cuando se representa el objeto, solo se muestran líneas similares a las de la captura de pantalla. captura de pantalla: cómo se representa el archivo de capas .
Importé el archivo .ply que estoy tratando de obtener una vista previa desde el editor en https://threejs.org/editor y carga el mismo archivo .ply perfectamente. cómo se representa el archivo en el editor three.js
¿Qué estoy haciendo mal aquí?
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); }); }}
this.mesh = new THREE.Mesh(geometry, new THREE.PointsMaterial( { size: 0.01, vertexColors: true } )); Dado que está cargando una nube de puntos, no es correcto crear una instancia de THREE.Mesh . Utilice THREE.Points . Puntos en su lugar.
Tampoco es necesario llamar a computeVertexNormals() cuando la geometría representa una nube de puntos.