如何在three.js中更新ShapeGeometry

how to update ShapeGeometry in three.js

本文关键字：更新 ShapeGeometry js three      更新时间：2023-09-26

我是新的在three.js，我试图更新一个ShapeGeometry，但它没有工作。现在我必须每次删除并读取shapeMesh 

    this.mesh.geometry.dispose()
    this.mesh.material.dispose()
    this.scene.remove(this.mesh)
    //vertex
    this.triangleShape = new THREE.Shape()
    this.triangleShape.moveTo(  -612+this.Eposition.left, 310-this.Eposition.top-25 )
    for(let i = 0 ; i < length ; i++) {
        this.triangleShape.lineTo(data[i][0],data[i][1])
    }
    this.triangleShape.lineTo(  -612+this.Eposition.left+141, 310-this.Eposition.top-25 )
    this.triangleShape.lineTo(  -612+this.Eposition.left+141, 310-this.Eposition.top )
    this.triangleShape.lineTo(  -612+this.Eposition.left, 310-this.Eposition.top )
    this.triangleShape.lineTo(  -612+this.Eposition.left, 310-this.Eposition.top-25 )// close path
    let geometry = new THREE.ShapeGeometry( this.triangleShape )
    this.mesh = new THREE.Mesh(geometry,this.material)
    this.scene.add(this.mesh)

我试着写this.mesh.geometry.verticesNeedUpdate = true，但它似乎不工作

不幸的是，您不能更新ShapeGeometry所使用的Shape，因为Shape只是由它创建的几何体的高级描述，而不是真正的几何体本身的一部分。

这里的重点是:形状是用矢量图形、曲线等来描述的。当你创建一个ShapeGeometry时，three.js将使用该描述来实际创建几何缓冲区(在这一步中，曲线将被分解为线段列表，封闭路径将被转换为三角形，参见ShapeGeometry.addShape()的实现)。

只要它的工作性能明智(形状不太复杂等)，你当然可以为每次更新创建一个新的几何，但由于这个过程也可以相当昂贵，你应该考虑实现你自己的几何或BufferGeometry做你需要做的事情(它不是那么复杂)。只要看看一些简单的东西，比如圆柱[缓冲]几何为例)。

相关文章：