格子状オブジェクトの作りかた（three.js）

上のサンプルのようなx,y各格子点に対するz値が与えられる格子状曲面を生成する方法を解説します。 three.jsにて線分オブジェクトを生成するLineSegmentsクラスを用いて全ての隣接する格子点間を線分でつなぐことで実現することができます。

３次元オブジェクトの生成方法

//形状オブジェクトの宣言と生成
var geometry = new THREE.Geometry();

function z( x, y ){
	return 70* Math.exp( -(x*x+y*y)/400 );
}

var N = 100;
var w = 2;

//x軸方向
for( var i=0; i<N; i++){
	for( var j=0; j<=N; j++){
		var x0 = (i - N/2 ) * w;
		var y0 = (j - N/2 ) * w;
		var z0 = z(x0, y0);
		var x1 = ((i+1) - N/2 ) * w;
		var y1 = (j - N/2 ) * w;
		var z1 = z(x1, y1);
		//頂点座標データの追加
		geometry.vertices.push( new THREE.Vector3(x0, y0, z0) );
		geometry.vertices.push( new THREE.Vector3(x1, y1, z1) );
	}

	for( var j=0; j<=N; j++){
		var x0 = (j - N/2 ) * w;
		var y0 = (i - N/2 ) * w;
		var z0 = z(x0, y0);
		var x1 = (j - N/2 ) * w;
		var y1 = ((i+1) - N/2 ) * w;
		var z1 = z(x1, y1);
		//頂点座標データの追加
		geometry.vertices.push( new THREE.Vector3(x0, y0, z0) );
		geometry.vertices.push( new THREE.Vector3(x1, y1, z1) );
	}
}

//材質オブジェクトの宣言と生成
var material = new THREE.LineBasicMaterial({ color: 0xFFFFFF, transparent:true, opacity:0.5 });
//線オブジェクトの生成
lines = new THREE.LineSegments(geometry, material);
//線オブジェクトのシーンへの追加
scene.add(lines);
//線オブジェクトの位置座標を設定
lines.position.set(0, 0, 0);

参考図書

・three.jsによるHTML5グラフィックス上　【改定版】
・three.jsによるHTML5グラフィックス下　【改定版】
・three.jsによるHTML5 3Dグラフィックス 【新機能と応用】