シェーダーマテリアルを利用して、作成したメッシュにuvを貼って色を付ける。またその際、three.js側で設定したライティングを考慮した色にする。
ライトを設置
const light1 = new THREE.DirectionalLight( 0xffffff, 0.5 ); light1.position.set(0, 0, 10); scene.add(light1);
メッシュに貼るためのテクスチャを読み込む
わかりやすいようにこんな感じの色分けした画像を用意。
画像を（2のべき乗）pxにしないとエラーが出るから注意。
const texLoader = new THREE.TextureLoader(); const armTex = texLoader.load( './data/tex/armTex.png' );
uvmapを作成
メッシュの座標とテクスチャ上の座標を対応（どこの色情報を参照するのか決める）させるため、マッピング用の配列を作る。uv座標は上の画像のようになっている。
前回まで作っていた筒状のメッシュに貼り付けることを考えたとき、基本的にはテクスチャの横をedge数、縦をsegment数（反対でもいいが）で割って、0～1の範囲をメッシュの座標に対応させるように考えればいいと思う。
function makeUvmap( obj ){
const uvmap = [];
for( let i=0; i<( obj.seg+1 ); i++ ){
uvmap[i] = [];
const y = i / obj.seg;
for( let j=0; j<( obj.edge+1 ); j++ ){
const x = j / obj.edge;
uvmap[i][j] = [x, y];
}
}
return uvmap;
}
あとは頂点座標の時と同じようにuv座標をジオメトリにsetAttributeしたいので、verticesと同じ体裁にuvmapの配列を整えたい。
注意なのは、verticesの方はedge数が8の時、頂点座標は以下のように端っこの部分で０に折り返している。
function setVertices( seg, edge, pt ){
const vert = [];
for( let i=0; i<seg; i++ ){
vert[i] = [];
for( let j=0; j<edge; j++ ){
vert[i][j] = [];
vert[i][j][0] = pt[i][j];
vert[i][j][1] = pt[i][(j+1) % edge];
vert[i][j][2] = pt[i+1][(j+1) % edge];
vert[i][j][3] = pt[i+1][j];
}
}
return new Float32Array( vert.flat(3) );
}
コードだと% edgeで剰余にしている部分。
セグメントごとに円を閉じるために最初の座標に戻ってくるようにしている。
でもuvは普通に（座標0地点に折り返さないで）端っこ（1.0）に行きたい。
makeUvmap関数でuvmap配列のedgeをひとつ増やしているのはそのため。
ジオメトリに対応させるため、setVertices関数と同じようにsetUvs関数を作成（edgeで折り返さないところだけ違う）。
function setUvs( seg, edge, pt ){
const vert = [];
for( let i=0; i<seg; i++ ){
vert[i] = [];
for( let j=0; j<edge; j++ ){
vert[i][j] = [];
vert[i][j][0] = pt[i][j];
vert[i][j][1] = pt[i][j+1];
vert[i][j][2] = pt[i+1][j+1];
vert[i][j][3] = pt[i+1][j];
}
}
return new Float32Array( vert.flat(3) );
}
makeGeometry関数は引数にuvmapを受け取るように追加し、uv情報をsetAttributeする記述を追加。
function makeGeometry( obj, pt, uv ){
const vertices = setVertices( obj.seg, obj.edge, pt );
const indices = setIndices( obj.seg, obj.edge );
const uvs = setUvs( obj.seg, obj.edge, uv ); //←追加
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute( vertices, 3 ));
geometry.setAttribute('uv', new THREE.BufferAttribute( uvs, 2 )); //←追加
geometry.setIndex(new THREE.BufferAttribute( indices, 1 ));
const merg = new THREE.Geometry().fromBufferGeometry( geometry );
merg.mergeVertices();
merg.computeVertexNormals();
return merg;
}
armInit関数内にも、uv情報を作成する記述を追加。
function armInit(){
// ..... ↑省略 ..... //
//upper arm
const upperArmUv = makeUvmap( upperArmObj ); //uvmapを作成
const upperArmpt = makePipePt( upperArmObj );
upperArmGeo = makeGeometry( upperArmObj, upperArmpt, upperArmUv ); //uvmapを追加
const upperArmMesh = new THREE.Mesh( upperArmGeo, uvMat );
//lower arm
const jointArmPt = makeJointPt( upperArmObj, -1 );
const lowerArmPt = makePipePt( lowerArmObj );
const lowerArmPts = jointArmPt.concat( lowerArmPt );
const jointArmUv = makeUvmap( jointArmObj ); //uvmapを作成
lowerArmGeo = makeGeometry( jointArmObj, lowerArmPts, jointArmUv ); //uvmapを追加
const lowerArmMesh = new THREE.Mesh( lowerArmGeo, uvMat );
//hand
lastValClear();
const fingerPt = makePipePt( fingerObj );
const fingerGeo = makeGeometry( fingerObj, fingerPt, upperArmUv ); //uvmapを追加
// ..... ↓省略 ..... //
}
指はupperArmとseg数、edge数が一緒なので、upperArmUvをそのままmakeGeometry関数に渡している。
シェーダーマテリアルの作成
const uniform = THREE.UniformsUtils.merge([
//ライト情報を使う設定
THREE.UniformsLib['lights'],{
//シェーダー側にテクスチャを渡す
'uTexture': { value: null },
}
]);
const material = new THREE.ShaderMaterial({
vertexShader: document.getElementById('vert').textContent,
fragmentShader: document.getElementById('frag').textContent,
uniforms: uniform,
side:THREE.DoubleSide,
lights: true
});
const armMat = material.clone();
armMat.uniforms.uTexture.value = armTex;
シェーダーマテリアルの基本的な設定方法は以前の記事を参照。
ライティングを正しく機能させるために、uniformにTHREE.UniformsUtils.mergeを使ってlightsを読み込んでいるのと、マテリアルの設定でlightsをtrueにするのを注意する。
armMat以外にもテクスチャ画像の違うマテリアルをいくつか用意することを考えて、基本となるマテリアルをクローンして、uniformのuTexutre変数に画像情報を個別にセットしている。
シェーダー側記述
頂点シェーダー側。
ライト情報を使うため、必要ソースをincludeしているところに注意。
<script id="vert" type="x-shader/x-vertex">
#include <common>
#include <lights_pars_begin>
varying vec2 vUv;
varying vec4 fragColor;
void main() {
//normalはShaderMaterialで補完されるジオメトリの法線情報
//ワールド座標系に変換
vec3 norm = normalMatrix * normal;
vec3 color = vec3( 0.0, 0.0, 0.0 );
//three.jsで設置したライトの方向を取得
vec3 vertexToLight = normalize( directionalLights[0].direction );
//three.jsで設置したライトの色を取得
vec3 lightCol = vec3( directionalLights[0].color );
//法線情報とライトの方向から反射を計算(マイナスは除去)
//ライトの色を考慮
color = lightCol * max( dot( vertexToLight.xyz, norm ), 0.0 );
/*
//ライトが複数ある場合
for (int i = 0; i < NUM_DIR_LIGHTS; i++) {
vec3 vertexToLight = normalize( directionalLights[i].direction );
vec3 lightCol = vec3( directionalLights[i].color );
color += lightCol * max( dot( vertexToLight.xyz, norm ), 0.0 );
}
*/
//colorをフラグメントシェーダーに渡す
fragColor = vec4( color, 1.0 );
//uv情報をフラグメントシェーダーに渡す
vUv = uv;
//positionをカメラ座標に変換
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
フラグメントシェーダー側。
<script id="frag" type="x-shader/x-fragment">
precision mediump float;
varying vec2 vUv;
varying vec4 fragColor;
uniform sampler2D uTexture;
void main() {
//テクスチャ画像から色を取得
vec3 texCol = texture2D( uTexture, vUv ).rgb;
//vec4に変換
vec4 color = vec4( texCol, 1.0 );
//ライティングをかける
gl_FragColor = fragColor * color;
}
</script>
uniformでthreejsからテクスチャ画像を受け取り、texture2Dでuv座標での色情報を取得している。
最終的にvaryingで頂点シェーダー側から受け取ったライティングの反射色と、テクスチャ画像からの色を掛け合わせている。
