スタートページ＞ Javascript＞ CANVAS＞ WebGL

WebGL Three.js material（被写体表面の材質、色）

material とは「素材」のことですが、ここでは被写体の表面の特性（色、受光特性など）のことです。
大きく光を必要とするものと、必要としないものに区分されます。光を必要とする material では、光がないと黒体になります。

ここでは、以下の material を、直方体と球体に適用し、光源は原点の真上に白色の点光源があるものとします。

基本ケース

material を指定して、シーンに被写体を 追加するには、次のようになります。
　// 被写体の形状
　　var geometry = new THREE.BoxGeometry(width, height, depth);
　// 被写体のmaterial。パラメタの与え方
　　var material = new THREE.MeshNormalMaterial({color:0x6699FF});
　// 被写体の定義・名称
　　var box = new THREE.Mesh(geometry, material);
　// 被写体 box の中心位置
　　box.position.set(x, y, z);
　// シーンへの被写体 box の追加
　　scene.add(box);

受光関係の幾つかのオプション

各種 material は多様なオプション機能をもっていますが、ここでは受光部分の見え方に関する代表的なオプションを掲げます。
　　reflectivity,refractionRatio :0 ～ 1。環境マップとは光源を持たない自然光。それがあるときの影響を受ける度合。省略値=0.98
　　fog：true/false。大気中の霧。false にすると受光面がくっきりとします。省略値=true
　　shininess：ハイライトへのシャープさ。省略値=30
　　roughness :0～1。表面粗さ。0=鏡面反射, 1=完全に拡散。省略値=1
　　metalness：0 ～1。金属性。0=木や石など、1=金属。省略値=0
コーディングの方法は簡単で、例えば Lambert で fog 指定をするには、次の１行を追加するだけです。
　　material = new THREE.MeshLambertMaterial();
　　material.fog = true;

多面体の色彩指定　THREE.MeshFaceMaterial

直方体の各面に色を塗るには、基本的には、次のように material を定義します。
MeshFaceMaterial はそのための関数です。
　　var mat = [];
　　mat[0] = new THREE.MeshBasicMaterial({color: "red"});　// Basic でなくてもよいが最も単純
　　　　：
　　mat[5] = new THREE.MeshBasicMaterial({color: "aqua"}); // 面の数だけ必要
　　var material = new THREE.MeshFaceMaterial(mat);

これでは、記述が面倒です。
下の例は、指定した色数が面数よりも少ないとき、繰り返すようにしています（col[i%m] ）。
　　var n = 6; // 面の数
　　var col = ["red", "green", "blue"];
　　var m = col.length;
　　var mat = [];
　　for (var i=0; i<n; i++) {
　　　　mat[i] = new THREE.MeshBasicMaterial({ color: col[i%m] });
　　}
　　var material = new THREE.MeshFaceMaterial(mat);

直方体なら以上でよいのですが、この例の正二十面体など一般の多面体では、次を付け加える必要があります。
説明は省略します。
　　var n = 20;　// 面の数
　　for (var i=0; i<n; i++) {
　　　　mat[i] = new THREE.MeshBasicMaterial({ color: col[i%m] });
　　} 　　geometry = new THREE.IcosahedronGeometry(200);
　　for (i = 0; i < n; i++) {
　　　　geometry.addGroup(3*i, n, i);
　　}

ワイヤーフレーム　material.wireframe = true 実行

正確には、物体を構成するポリゴンに分解したときの辺を表示したものです。
本来は平面上の線や隠線を消去したいのですが、私はその方法を知りません。
手段は単純で１行加えるだけです。
　　var geometry = new THREE.BoxGeometry(250, 250, 250);
　　var material = new THREE.MeshBasicMaterial({ color: "red"} );　// 線の色になる
　　material.wireframe = true;
　　var box = new THREE.Mesh(geometry, material);