xy平面上の格子点で与えられたz値をもつ格子状オブジェクトへのテクスチャマッピング（three.js）

xy平面上の格子点で与えられたz値をもつ格子状オブジェクトへのテクスチャマッピングを行いたい場合、 three.jsにてあらかじめ用意されている平面オブジェクト(Planeクラス)では対応することができません。 形状オブジェクトをGeometryクラスを用いて自前で準備する必要があります。 今回必要なデータは次の３つです。

１．頂点座標（verticesプロパティ）
２．面指定配列（facesプロパティ）
３．頂点色（faces.colorsプロパティ）
４．テクスチャ座標（faceVertexUvsプロパティ）

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

	var N = 100;
	var width = 1;

	var specifyZ = {  //z値の指定
		enabled : true,
		function : function( x , y ){
			return 50*Math.exp( - ( x * x + y * y ) / 200 );
		}
	};
	var specifyColor = {  //color値の指定
		enabled : true,
		function : function( x , y ){
			var w = 0.9 * Math.exp( - ( x * x + y * y ) / 200 ) + 0.1;
			return { r: w, g: w, b: w };
		}
	}

	var vertices = [];
	var colors = [];
	var faces = [];

	//頂点座標データの追加
	for ( var i = 0; i <= N; i++ ) {
		for ( var j = 0; j <= N; j++ ) {
			var x = ( -N / 2 + i );
			var y = ( -N / 2 + j );
			var z = ( specifyZ.enabled )? specifyZ.function( x, y ) : 0;

			vertices.push( new THREE.Vector3( x, y, z ) );

			if( specifyColor.enabled ) {
				colors.push( specifyColor.function( x, y ) );
			}
		}
	}

	//面指定用頂点インデックスを追加
	for ( var i = 0; i < N; i++ ) {
		for ( var j = 0; j < N; j++ ) {
			var ii = ( N + 1 ) * i + j;
			faces.push( [ ii, ii + ( N + 1 ), ii + ( N + 1 ) + 1 ] );
			faces.push( [ ii,  ii + ( N + 1 ) + 1, ii + 1 ] );
		}
	}

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

	//形状オブジェクトに頂点座標の設定
	for( var i = 0; i < vertices.length; i++ ){
		geometry.vertices.push( vertices[i] );
	}

	//全てのポリゴン面を指定する
	for( var i = 0; i < faces.length; i++ ){

		if( specifyColor.enabled ){

			var _colors = [
				colors[ faces[i][0] ],
				colors[ faces[i][1] ],
				colors[ faces[i][2] ]
			]

		} else {

			var _colors = null;

		}

		geometry.faces.push( new THREE.Face3( faces[i][0], faces[i][1], faces[i][2] , null , _colors) );

		var v1 = vertices[ faces[i][0] ];
		var v2 = vertices[ faces[i][1] ];
		var v3 = vertices[ faces[i][2] ];

		geometry.faceVertexUvs[ 0 ].push( [
			new THREE.Vector2( (v1.x + N/2)/N , (v1.y + N/2)/N ),
			new THREE.Vector2( (v2.x + N/2)/N , (v2.y + N/2)/N ),
			new THREE.Vector2( (v3.x + N/2)/N , (v3.y + N/2)/N )
		] )

	}

	//面の法線ベクトルを計算
	geometry.computeFaceNormals( );
	//面の法線ベクトルから頂点法線ベクトルの計算
	geometry.computeVertexNormals( );

	//材質オブジェクトの宣言と生成
	var material = new THREE.MeshBasicMaterial({ color: 0xffffff, vertexColors: THREE.VertexColors });

	//平面オブジェクトの生成
	plane = new THREE.Mesh(geometry, material);
	//平面オブジェクトのシーンへの追加
	scene.add(plane);
	//平面オブジェクトの位置座標を設定
	plane.position.set(0, 0, 0);

	//画像データの読み込みとテクスチャオブジェクトの生成
	var loader = new THREE.TextureLoader();
	loader.load( 'simyu-kun500.png', function( texture ) {

		//テクスチャマッピングの実装
		plane.material.map = texture;
		plane.material.needsUpdate = true;

	});

参考図書

３次元グラフィックス関連

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