While utilizing the three.js library to render an image on the screen, I encountered a peculiar issue. Specifically, when I instantiate my particles using THREE.point(geometry, materials), TypeScript throws an error stating that vertices are nonexistent in particles.geometry.vertices. However, despite this error message, the module runs smoothly and everything functions as expected. It's puzzling because the image is successfully displayed, indicating that the vertices must indeed exist.
In the context of geometry, there exists a property known as vertices. Upon creating the particles object with three.point(geometry, material), I can access all the vertices from the geometry by referencing this.particles.geometry.vertices. Curiously, TypeScript claims that the property does not exist within geometry, even though it operates seamlessly.
An error message persists without hindering the execution: https://i.sstatic.net/Ea0xi.png Errors in text:
[at-loader] ./ClientApp/app/components/shared/backgroundScene/backgroundScene.component.ts:146:53
TS2339: Property 'vertices' does not exist on type 'Geometry | BufferGeometry'.
Property 'vertices' does not exist on type 'BufferGeometry'.
[at-loader] ./ClientApp/app/components/shared/backgroundScene/backgroundScene.component.ts:147:56
TS2339: Property 'vertices' does not exist on type 'Geometry | BufferGeometry'.
Property 'vertices' does not exist on type 'BufferGeometry'.
[at-loader] ./ClientApp/app/components/shared/backgroundScene/backgroundScene.component.ts:152:33
TS2339: Property 'verticesNeedUpdate' does not exist on type 'Geometry | BufferGeometry'.
Property 'verticesNeedUpdate' does not exist on type 'BufferGeometry'.
The source code segment where the error references the non-existence of vertices lies within the render function, while drawImage showcases how I populate my particles. Despite these errors, everything operates correctly. The challenge lies in accessing object properties that TypeScript erroneously denotes as missing, despite their existence when running the code. If you have insights on acquiring typings to view these properties in my objects, please share your knowledge. Rest assured, both three.js and its typings are properly imported and functioning. These issues persist in encountering object properties deemed nonexistent by TypeScript, although operational during runtime.
public render() {
this.renderer.render(this.scene, this.camera);
// Draw image to screen
for (var i = 0, j = this.particles.geometry.vertices.length; i < j; i++) {
var particle:any = this.particles.geometry.vertices[i];
particle.x += (particle.destination.x - particle.x) * particle.speed;
particle.y += (particle.destination.y - particle.y) * particle.speed;
particle.z += (particle.destination.z - particle.z) * particle.speed;
}
this.particles.geometry.verticesNeedUpdate = true;
}
public drawImage() {
// Create vertices to draw the image.
for (var y = 0, y2 = this.imageData.height; y < y2; y += 2) {
for (var x = 0, x2 = this.imageData.width; x < x2; x += 2) {
if (this.imageData.data[(x * 4 + y * 4 * this.imageData.width) + 3] > 128) {
let vertex:any = new THREE.Vector3();
vertex.x = Math.random() * 1000 - 500;
vertex.y = Math.random() * 1000 - 500;
vertex.z = -Math.random() * 500;
vertex.destination = {
x: x - this.imageData.width / 2,
y: -y + this.imageData.height / 2,
z: 0
};
vertex.speed = Math.random() / 200 + 0.015;
this.geometry.vertices.push(vertex);
}
}
}
this.particles = new THREE.Points(this.geometry, this.material);
this.scene.add(this.particles);
requestAnimationFrame(this.render);
}