three.jsで線が伸びるアニメーション

three.jsで線が伸びてくアニメーションをつくるときに少しクセがあったのでメモ。

まずは通常の"伸びない"線の描き方。

var scene, line;

function drawNormalLine(){
	var geometry = new THREE.Geometry();
	geometry.vertices.push(new THREE.Vector3(-100,0,0));
	geometry.vertices.push(new THREE.Vector3(100,0,0));
	var material = new THREE.LineBasicMaterial({color: 0x00FFFF, linewidth: 2});
	line = new THREE.Line(geometry, material);
	scene.add(line);
}

これで、

line.geometry.vertices.push(new THREE.Vector3(200,0,0));
line.geometry.verticesNeedUpdate = true;

とか、やっていけば線が伸びるんだろうと思ったら伸びない。

解決するにあたり参考になったのは、このポスト↓
http://stackoverflow.com/questions/31399856/drawing-a-line-with-three-js-dynamically/31411794#31411794

ポイントは、
var geometry = new THREE.Geometry();
ではなく、
var geometry = new THREE.BufferGeometry();
を使うこと。

基本的に、geometryの頂点数（verticesの数）を動的に増やしていくことはできないんだそう。
なので、最初にある程度、頂点を配列にどばっと入れておいて、その内いくつ目までの頂点を使うかを指定する。

function drawDynamicLine(){
	//---最大頂点数をあらかじめ指定する必要がある。ここでは30
	var maxpoints = 30;

	//---BufferGeometryを使うのがポイント
	var geometry = new THREE.BufferGeometry();

	//---頂点の場所を格納していくarrayを用意。各頂点（x,y,z）の３つの数字があるので3倍する
	var positions = new Float32Array(maxpoints * 3);
	geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));

	//---配列に頂点の座標をいれてく。ひとまずmaxpointsで設定した頂点数の内、2頂点分
	var array = geometry.attributes.position.array;
	array[0] = -100;	//x1
	array[1] = 0; 		//y1
	array[2] = 0;		//z1
	array[3] = 100;		//x2
	array[4] = 0;		//y2
	array[5] = 0;		//z2

	//---BufferGeometryクラスの.addGroup　引数は( start, count, indexOffset )
	//---とりあえず用意した頂点のうち0番から2番まで結ぶ
	geometry.addGroup(0, 2, 0);

    //---あとは、通常と同じ
	var material = new THREE.LineBasicMaterial({ color: 0x990000, linewidth : 5});
	line = new THREE.Line(geometry, material);

    scene.add(line);
}

で、"伸ばせる"線の最初の部分が描ける。

用意した頂点（maxpointsで指定した数）のいくつ目までを使って線を描くかを決めるのは↓の数。
line.geometry.drawcalls[0].count

アップデート: .geometry.drawcallsが廃止された。
用意した頂点（maxpointsで指定した数）のいくつ目までを使って線を描くは、
line.geometry.setDrawRange( start, count );
で更新する。
なので、これ以降、

index = 3; //---新たに加える頂点のindex (ここでは、最大30)
var array = geometry.attributes.position.array;
array[index*3]   = newX; //---新たに加える頂点のx座標
array[index*3+1] = newY; //---新たに加える頂点のy座標
array[index*3+2] = newZ; //---新たに加える頂点のz座標

とかで、頂点座標を配列に加えてから、

line.geometry.setDrawRange(0, 3);

ってやると、0番目から3番目の頂点までを含む線が描ける。

なので、線が伸びるアニメーションをつくりたいときは、最初にスタート地点からゴール地点までの頂点を全部登録しておいて、drawcalls[0].countの数を .setDrawRange(0, 3)の数を、animation関数の中で増やしていけば、伸びていくはず。
http://jsfiddle.net/yuyuyuyoyoyo/0zurstzw/9/