web-dev-qa-db-ja.com

three.jsを使用して動的に線を引く

これは私が達成したいことです（赤い円が頂点である修正可能なポリゴン）。そして、ポリゴンを動的に構築したいと思います。

enter image description here

ジオメトリを次のように開始するとき

var geometry = new THREE.Geometry();

geometry.vertices.Push(point);
geometry.vertices.Push(point);

var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));

2回目のクリックまでは正常に機能し、1と2の間の直線を作成しますが、配列にプッシュしても3行目は追加しません。 WebGLはバッファリングされたポイントを必要とするようです。

このように頂点を事前定義すると、2本の線を描画できます（3回目のクリック）

var geometry = new THREE.Geometry();

for (var i = 0; i < 4; i++) {
    geometry.vertices.Push(point);
}

var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));

しかし、ユーザーが追加する頂点の数がわからないため、これは良いソリューションではありません。複数回ループする必要があるため、大きな数を割り当てることは無意味です。

それを回避する方法はありますか？

javascriptthree.jswebgl
14
user3960875

BufferGeometryおよびsetDrawRange()メソッドを使用して、ラインをアニメーション化するか、レンダリングするポイントの数を増やすことができます。ただし、最大数のポイントを設定する必要があります。

var MAX_POINTS = 500;

// geometry
var geometry = new THREE.BufferGeometry();

// attributes
var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

// draw range
drawCount = 2; // draw the first 2 points, only
geometry.setDrawRange( 0, drawCount );

// material
var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

// line
line = new THREE.Line( geometry,  material );
scene.add( line );

次のようなパターンを使用して位置データを設定します。

var positions = line.geometry.attributes.position.array;

var x = y = z = index = 0;

for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {

    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;

    x += ( Math.random() - 0.5 ) * 30;
    y += ( Math.random() - 0.5 ) * 30;
    z += ( Math.random() - 0.5 ) * 30;

}

最初のレンダリング後にレンダリングされたポイントの数を変更したい場合、これを行います：

line.geometry.setDrawRange( 0, newValue );

最初のレンダリング後にposition data valuesを変更する場合は、needsUpdateフラグを次のように設定します。

line.geometry.attributes.position.needsUpdate = true; // required after the first render

フィドルがあります ユースケースに適応できるアニメーション化された行を表示しています。

編集： この答え を参照してください。特に、線が少数のポイントのみで構成されている場合は、より適切なテクニックが必要です。

three.js r.84

36
WestLangley

フリーハンドで落書きしたい場合は、マウスイベントとベクター配列でフィドルを更新しました。

https://jsfiddle.net/w67tzfhx/40/

function onMouseDown(evt) {

    if(evt.which == 3) return;


    var x = ( event.clientX / window.innerWidth ) * 2 - 1;
    var y =  - ( event.clientY / window.innerHeight ) * 2 + 1;

    // do not register if right mouse button is pressed.

    var vNow = new THREE.Vector3(x, y, 0);
    vNow.unproject(camera);
    console.log(vNow.x + " " + vNow.y+  " " + vNow.z); 
    splineArray.Push(vNow);

    document.addEventListener("mousemove",onMouseMove,false);
    document.addEventListener("mouseup",onMouseUp,false);
}
7
user3325025

リアルタイムで線を引く

ここでは更新されたフィドルここで、user3325025彼の例;この場合、レンダリング時にラインのすべてのポイントを更新する必要はまったくありません。更新が必要なのは、onMouseMove（行末の更新）およびonMouseDown（新しいポイントの描画）のみです。

// update line
function updateLine() {
  positions[count * 3 - 3] = mouse.x;
  positions[count * 3 - 2] = mouse.y;
  positions[count * 3 - 1] = mouse.z;
  line.geometry.attributes.position.needsUpdate = true;
}

// mouse move handler
function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  mouse.z = 0;
  mouse.unproject(camera);
  if( count !== 0 ){
    updateLine();
  }
}

// add point
function addPoint(event){
  positions[count * 3 + 0] = mouse.x;
  positions[count * 3 + 1] = mouse.y;
  positions[count * 3 + 2] = mouse.z;
  count++;
  line.geometry.setDrawRange(0, count);
  updateLine();
}
7
Wilt