THREE.Geometry()でverticesを更新するときにverticesNeedUpdateの使い方がわからず困った

やりたかったこと

THREE.Geometry()で形状データを作成するときに,ランダムに3D空間上に点を置いていく実装をしていた。このランダムに置いた点を、動かすことでパーティクルの表現をしたかった

サンプル(動くもの)

問題点

サンプルコードのように、作成したgeometryのvertexの中にあるy軸のどのへんの位置にそんざいしているかという値を変更しても、なぜかかわらない。

mesh.geometry.vertices.forEach(vertex => {
      vertex.setY(vertex.y + vertex.velocity.y);
});

解決方法

参考文献によると、「geometry.verticesNeedUpdate」はレンダリング後に毎回falseになるらしいので
mesh.geometry.verticesNeedUpdate = true;を毎回レンダリングで呼ぶ関数の中に設置することで、解決した

// レンダリング---------------------
  function render(){
    requestAnimationFrame(render);
    //particle system自体をまわす
    mesh.rotation.y += 0.001;

    // meshに設定したgeometryの中に入っている点のy軸をランダムに動かすようにする
    mesh.geometry.vertices.forEach(vertex => {
      vertex.setY(vertex.y + vertex.velocity.y);
    });
    // geometryの「geometry.verticesNeedUpdate」はレンダリング後に毎回falseになるらしいのでtrueをここで設定している。
    // https://stackoverflow.com/questions/24531109/three-js-vertices-does-not-update
    mesh.geometry.verticesNeedUpdate = true;
    
    // マウスでカメラを操作するため
    controls.update();

    //シーンとカメラをいれる。
    renderer.render(scene,camera);
  }

ちなみに

ドキュメントには、verticesを更新する場合は、verticesNeedUpdateをtrueにする必要があると書いてあるが、レンダリング後に毎回falseになるとは書いていないので、どなたかそれがドキュメントのここに書いてあるということをご存じの方は教えて下さい

サンプルコード

参考文献