12

threejsで線を引く方法を理解しました。問題は、線に頂点を動的に追加する必要があることです。ラインに頂点を動的に追加すると、シーンが更新されません。

試しましたがgeometry.verticesNeedUpdate = true、うまくいかないようです。

4

3 に答える 3

15

編集：を使用するBufferGeometryと、drawcalls同等の機能を実装できるようになります。three.jsを使用して動的に線を引くを参照してください。

three.js r.71

行に頂点を動的に追加することはサポートされていません。Wikiで述べられているように：

バッファのコンテンツのみを更新でき、バッファのサイズを変更することはできません（これは非常にコストがかかり、基本的に新しいジオメトリを作成するのと同じです）。

より大きなバッファを事前に割り当ててから、不要な頂点を折りたたんだり非表示にしたりすることで、サイズ変更をエミュレートできます。

three.js r.55

于 2013-02-12T20:16:00.117 に答える
5

私も数日前にこれに遭遇しました。WestLangleyが言ったように、箱から出して真の動的ジオメトリを実行することはできませんが、alteredqには、https：//github.com/mrdoob/three.js/issuesで「偽造」して目的の効果を達成するための戦略がいくつかあります。 /342。

最後の回答に対するコメントに関しては、フレームごとにシーンから新しい行を削除して再度追加するだけでなく、（ほとんどの場合）パフォーマンスに大きな打撃を与えることになります。Alteredqの回避策の最初または2番目を使用する必要があります。

私のアプリでは、次のようなオプション1を使用しました。

  1. 事前にTHREE.Geometryオブジェクトを作成し、必要と思われる数の頂点（またはかなり多数の頂点）で初期化します。（また、それらを表示する前に、何らかの方法でそれらを非表示にする必要があります-私はそれらの位置を画面外に設定しました。）

  2. そのジオメトリでTHREE.Lineオブジェクトを作成し、シーンに追加します。

  3. ここで、ラインに新しいポイントを追加する場合は、ジオメトリオブジェクトの頂点にインデックスを付け、そこで最後に使用されていないポイントを見つけて更新する必要があります。座標を実際の座標に変更して設定しますgeometry.verticesNeedUpdate = true;（それ以外の場合は、何も変わっていないと思います）。（Wikiで更新を行う方法を参照してください。）

私はまだ私のアプローチのねじれを解決していますが、それは少なくとも画面上に線画を描くことを可能にするはずです。

three.js r55

于 2013-02-16T23:44:58.310 に答える
2

WestLangleyの答えが言うように、あなたはそれをすることはできません。これが私が使用することに決めた明らかにハッキーな回避策です：

  • 線の始点をgeometry.verticesに入力して、必要以上の頂点を割り当てます
  • 追加したい新しいポイントが入ったら、配列の内容を左にシフトし、geometry.verticesの最後の配列エントリに新しいポイントを書き込みます。

コード：新しい行を作成するには：

function createNewLine(startingPoint){
    var geometry = new THREE.Geometry();
    for (i=0; i<MAX_LINE_POINTS; i++){
    geometry.vertices.push(startingPoint.clone());
    }
    myLine = new THREE.Line(geometry, lineMaterial);
    myLine.geometry.dynamic = true;
    scene.add(myLine);
    render();
}

線にポイントを追加するには：

function addPoint(myPoint) {
    myLine.geometry.vertices.push(myLine.geometry.vertices.shift()); //shift the array
    myLine.geometry.vertices[maxLinePoints-1] = myPoint; //add the point to the end of the array
    myLine.geometry.verticesNeedUpdate = true;
    render();
}

最終的には、一連のポイントが積み重なって、実際にレンダリングしたいポイントが続くラインになります。この問題のより簡単な解決策として、three.jsgitリポジトリに問題を提出しました。 https://github.com/mrdoob/three.js/issues/4716

于 2014-04-24T01:15:34.353 に答える