ここで少し問題があります。THREE.Lineマテリアルとジオメトリを持つオブジェクトがあります。init メソッドは 2 つの頂点をジオメトリにプッシュし、ラインをシーンに追加します。ラインは問題なくレンダリングされます。
しかし、私はイベントリスナーを持っています... キャンバス内でクリックするたびに、別の頂点が追加されます。ただし、シーンがレンダリングされると、元の 2 つの頂点のみがレンダリングされます。のダンプを出力しましたscene.childrenが、ラインがシーン内にあり、ジオメトリが変更されていることは確かです。
ドキュメントでは、適用について次のように述べています。
geometry.dynamic = true
geometry.verticesNeedUpdate = true
しかし、これらもうまくいきませんでした。
three.js Wiki を参照してください: https://github.com/mrdoob/three.js/wiki/Updates
バッファのコンテンツを更新することしかできず、バッファのサイズを変更することはできません (これは非常にコストがかかり、基本的に新しいジオメトリを作成するのと同じです)。
大きなバッファーを事前に割り当ててから、不要な頂点を折りたたんだり隠したりすることで、サイズ変更をエミュレートできます。
ジオメトリは、固定サイズの頂点バッファー オブジェクトを介して指定されます。バッファを作成および削除できますが、サイズを変更することはできません。
回避策として、追加の頂点を持つジオメトリを作成し、不要な頂点を 1 つのポイントにまとめることができます。
three.js r.52
編集: 新しいアプローチは、three.js を使用して動的に線を引くで説明されています。