るこぶろぉぐ

シェーダーマテリアルを利用して、作成したメッシュに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で頂点シェーダー側から受け取ったライティングの反射色と、テクスチャ画像からの色を掛け合わせている。

参考：https://qiita.com/aa_debdeb/items/870e52499dc94a2942c3

今回で腕は完成です。

指を追加する

const fingerObj = new Limbs();

function armInit(){
    //パラメータの設定
    const fingerLength = upperArmLength / 10;  //よさげな長さ
    const fingerThick = upperArmThick / 5;　　 //よさげな太さ
    const fingerThicks = new Array( limbSeg );
    for( let i=0; i<( limbSeg+1 ); i++ ){
　　　　 //太さ段々すぼめて最後は0(閉じる)
        const t = i / limbSeg;
        fingerThicks[i] = fingerThick - Math.pow( t, 3 ) * fingerThick;
    }
    fingerObj.ep = new THREE.Vector2( fingerLength,0 );
    fingerObj.cp = new THREE.Vector2( fingerLength,0 );
    fingerObj.thick = fingerThicks;
    fingerObj.width = fingerThicks;

　　//meshの作成
    lastValClear();    //lastPos, lastAngleの初期化
    const fingerPt = makePipePt( fingerObj );
    const fingerGeo = makeGeometry( fingerObj, fingerPt );
　　//指の立て付け
    const fingerAngles = [ -PI/4, -PI/8, 0, PI/4 ];
    const handLength = ( upperArmLength + lowerArmLength ) * 0.11;
    for( let i=0; i<4; i++ ){
        const fingerMesh = new THREE.Mesh( fingerGeo, armMat );
        const z = ( upperArmThick*0.8 ) * Math.sin( fingerAngles[i] );　　//指meshのz位置
        const x = ( upperArmThick*0.8 ) * Math.cos( fingerAngles[i] );　　//指meshのx位置
        fingerMesh.rotation.y = -fingerAngles[i]; 　　　　　　　　　　　　　//指meshを回転
        fingerMesh.position.set( x - ( handLength ), 0, z );   //handLength分だけ中に入れる
　　　　 //作成したmeshをhandGグループに追加（４つ分）
        handG.add( fingerMesh );
    }
    //lowerArmグループに追加
    lowerArmG.add( handG );
}

//lastPos, lastAngleの初期化関数
function lastValClear(){
    lastAngle = 0;
    lastPos = new THREE.Vector2();
}

指の形状のメッシュを４個分作る。

fingerAnglesの角度に指をくっつける。

なお、指はちっちゃく作るので、特に曲げたりは想定してない。

腕のジオメトリを更新する関数（armUpdate）の最後に、handG（指のグループ）の座標と角度を更新する処理を入れる。

function armUpdate( angle1, angle2 ){
    //upperArm
    lastValClear();
    upperArmUpdate( angle1 );
    //lowerArm
    lowerArmUpdate( angle2 );
    //hand
    handG.rotation.z = lastAngle;    //角度を更新
    handG.position.set( lastPos.x, lastPos.y, 0 );  //位置を更新
}

回転を追加する

armupdate関数に処理を追加して、腕全体（armG）と、ひじから先（lowerArmG）を個別に回転できるようにする。

function armUpdate( angle1, angle2, rotate1, rotate2 ){
    //upperArm
    lastValClear();
    upperArmUpdate( angle1 );
    //lowerArm
    const r = lastAngle;     //upperArmの最終の角度をとっておく
    lowerArmUpdate( angle2 );
    //hand
    handG.rotation.z = lastAngle;
    handG.position.set( lastPos.x, lastPos.y, 0 );
    //回転の処理
    armG.quaternion.set( 0,0,0,1 );
    lowerArmG.quaternion.set( 0,0,0,1 );
    const axis1 = new THREE.Vector3( 1,0,0 );
    const axis2 = new THREE.Vector3( Math.cos(r),Math.sin(r),0 ).normalize();
    const q1 = new THREE.Quaternion().setFromAxisAngle( axis1, rotate1 );
    const q2 = new THREE.Quaternion().setFromAxisAngle( axis2, rotate2 );
    armG.applyQuaternion( q1 );
    lowerArmG.applyQuaternion( q2 );
}

回転にはクオータニオンを使う。クオータニオンの細かいことは分からないが、とりあえず任意の軸にそってメッシュを回転させる、というのが実現できればよい。

まずそれぞれメッシュの回転を初期化。

armG.quaternion.set( 0,0,0,1 );
lowerArmG.quaternion.set( 0,0,0,1 );

次に回転させたい軸の設定をする。腕全体はx軸にそって回転させればいいので、axis1に(1,0,0)のベクトルを設定。

ひじから先はupperArmの曲がっている方向を軸にして回転させたいので、upperArmの最後の角度からベクトルを計算する。

const axis1 = new THREE.Vector3( 1,0,0 );
const axis2 = new THREE.Vector3( Math.cos(r),Math.sin(r),0 ).normalize();

軸に設定するベクトルは正規化されている必要があるので注意。

最後に、setFromAxisAngleメソッドでそれぞれの軸と回転させたい角度を設定し、メッシュのグループに適用する。

const q1 = new THREE.Quaternion().setFromAxisAngle( axis1, rotate1 );
const q2 = new THREE.Quaternion().setFromAxisAngle( axis2, rotate2 );
armG.applyQuaternion( q1 );
lowerArmG.applyQuaternion( q2 );

アニメーション

アニメーションループに腕の回転の動きも追加する。

armGの回転はrotVal1、lowerArmGの回転はrotVal2に値の推移をセットしている。

アニメーションの値を書き込むようのオブジェクトの、positionのプロパティには腕の曲げ角度の方を入れているので、回転はscaleのプロパティを使うことにした。

それぞれのキーフレームを配列としてAnimationClipに渡すことで、同時に曲げと回転の値をアニメーションできる。

const upperArmMove = new THREE.Object3D();
//armUpdateに渡すangleとrotateの値をセット
const dur = [ 0, 2, 4 ];
const posVal1 = [ -0.5, 0, -0.5 ];
const posVal2 = [ 0, 1.5, 0 ];
const rotVal1 = [ 0, 0, 0 ];
const rotVal2 = [ 0, -PI, 0 ];
//配列の形にする
const upperArmPos = [];
const upperArmRot = [];
for( let i=0; i<dur.length; i++ ){
    upperArmPos.push( posVal1[i] );
    upperArmPos.push( posVal2[i] );
    upperArmPos.push( 0 );
    upperArmRot.push( rotVal1[i] );
    upperArmRot.push( rotVal2[i] );
    upperArmRot.push( 0 );
}

//それぞれのキーフレームを作りclipに配列として追加
const uppperArmKF1 = new THREE.NumberKeyframeTrack( '.position', dur, upperArmPos );
const uppperArmKF2 = new THREE.NumberKeyframeTrack( '.scale', dur, upperArmRot );
const clip = new THREE.AnimationClip( 'Action', 4, [ uppperArmKF1, uppperArmKF2 ] );

レンダリングサイクル内でarmUpdate関数を呼び出す。

const clock = new THREE.Clock();
render();
function render(){
    //animation update
    mixer.update(clock.getDelta());
    let angle1 = upperArmMove.position.x;
    let angle2 = upperArmMove.position.y;
    let rot1 = upperArmMove.scale.x;
    let rot2 = upperArmMove.scale.y;
    armUpdate( angle1, angle2, rot1, rot2 );

    //cycle
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}