Question

我正在使用three.js库将图像绘制到屏幕上。当我创建我的粒子= THREE.point（几何，材料）时，typescript说粒子.geometry.vertices中不存在顶点，但是当我运行我的模块时，所有内容都会加载并响应，除此之外它给出了这个错误，说顶点确实不存在，如果它们不存在，我就不会画出那个图像。

Geometry有一个叫做顶点的属性，当我通过three.point（geometry，material）创建对象粒子时;我从几何体中获取了所有顶点并通过执行此操作来访问它们.particles.geometry.vertices，但是typescript表示该属性在几何体中不存在，即使它有效。

错误的图片，即使所有内容都按预期执行：文字错误：

[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'.

绘制图像的源代码，其中顶点不存在是在渲染中，而drawImage只显示我如何添加到我的粒子。一切正常，我只是不明白为什么当一切正常时我得到这些错误。如果您知道如何获得打字，那么我可以在我的对象中看到这些属性让我知道。我有3j进口和打字，如果你想知道，那些工作正常。我只是遇到了在属性存在时访问对象属性的问题，并且打字稿说它没有，但是当我运行我的代码时，我可以看到它确实存在。

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

Answer 1

我找到的修复并不是最干净的，但我明确地将我的粒子投射到我的for循环中的任何一个，它表示顶点不存在。我改变了

原文：

this.particles.geometry.vertices.length;

修复：

(this.particles as any).geometry.vertices.length;

然后在我的tsconfig中，我将noImplicitAny标志设置为true。

"noImplicitAny": true

Typescript组件正确运行，但表示存在错误，因为它无法识别存在

1 个答案: