Three.js faceVertexUvsを利用したテクスチャのアニメーション

    let animate = (mesh) => {
        vectorAdd(mesh.geometry.faceVertexUvs[0][10], 16, 48, 0, 16);
        vectorAdd(mesh.geometry.faceVertexUvs[0][11], 16, 48, 0, 16);
        mesh.geometry.uvsNeedUpdate = true;
    }

function vectorAdd(face, width, height, x, y)
{
    //Vector2をリアル座標系に変換してから座標を加算する関数
    let add = vector => {
        let xx = vector.x * width + x;
        let yy = (1 - vector.y) * height + y;

        return {x: xx, y: yy};
    }

    //すべての座標をリアル座標になおして加算
    let vexs = []; //Vector2の配列
    let maxX = 0, maxY = 0;
    face.forEach(vector => {
        let pos = add(vector)
        vexs.push(pos)
        //はみ出しチェック用
        maxX = Math.max(maxX, pos.x)
        maxY = Math.max(maxY, pos.y)
    });

    //最大幅よりもはみ出してたらマイナスする
    let minusX = maxX > width ? width: 0;
    let minusY = maxY > height ? height: 0;

    //座標系を変換して実際のfaceVertexUvsに代入
    for(let i=0; i < face.length; i++){
        face[i].x = (vexs[i].x - minusX) / width
        face[i].y = 1 - (vexs[i].y - minusY) / height
    }
}