２次元格子上データの３次元描画／２次元・３次元格子データのグラフ描画クラス「Graph.js」

２次元・３次元格子データのグラフ描画クラス「Graph.js」を用いて作成する２次元格子上データの３次元描画（Graph3Dクラス）を紹介します。

２次元格子上データの３次元描画（Graph3Dクラス）の生成

//グローバル変数の宣言
var graph3D; //３次元グラフオブジェクト
var xmin = -10;
var xmax = 10;
var ymin = -10;
var ymax = 10;

function F( x, y, t ){
	var omega = Math.PI/40;
	return Math.sin( x/2 + t*omega ) * Math.sin( y/2 + t*omega ) ;
}

function initObject() {

	var N = 100;
	var values = []
	for (var i = 0; i <= N; i++) {
		values[ i ] = [];
		for (var j = 0; j <= N; j++) {
			var x = xmin + (xmax - xmin) * i / N;
			var y = ymin + (ymax - ymin) * j / N;
			values[i][j] = F( x, y, 0 );
		}
	}

	//３次元グラフオブジェクトの生成
	graph3D = new GRAPH.Graph3D( {
		N : N,   //頂点の数
		min : -1,  //最小値
		max : 1,   //最大値
		wireframe : true, //ワイヤーフレーム表示
		opacity : 1.0,       //不透明度
		doubleSide : true, //両面描画
		hightScale : 0.2,    //高さのスケール
		colorParameter : {
			variable : true,
			backWhite : false, //RGBモード時の中点を白とするフラグ
		},
		fieldValues :values
	});

	（省略）
}

２次元格子上データの３次元描画（Graph3Dクラス）の実装例

三角関数の積　「z = sin(x) × cos(y)」　の描画結果です。 ２次元格子上データの３次元描画 独立ページはこちら。

コンストラクタの引数（プロパティ）

メソッド

その他の描画結果

「 colorParameter.backWhite = true 」 の描画結果

「 wireframe = false 」 の描画結果