HOME > natural science Laboratory > コンピュータ・シミュレーション講座 > WebGL

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

文責:遠藤 理平 (2017年3月26日) カテゴリ:TIPS 集(104)WebGL(46)

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

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

//形状オブジェクトの宣言と生成
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グラフィックス 【新機能と応用】



▲このページのトップNPO法人 natural science トップ

関連記事

TIPS 集

WebGL

▲このページのトップNPO法人 natural science トップ