webGLでキー入力に応じてオブジェクトを移動させる方法が知りたい。

Question

提示コードの///コメント内部のコードですがキー入力の受付は実装出来たのですがそれに合わせてmode.Translate.xという値をプラス、マイナスさせることによって移動させたいのですが何故か移動してくれません。直接値をいじると移動できるので設定している値は問題ないのですがが
どうすれば移動できるのでしょうか？

////////////////////////////////////////////////////////////////////////////////////
//モデルの情報
let model = 
{
  Translate:
  {
    x: 0,
    y: 0,
    z: -4,
  },

  Rotate:
  {
    x: 0,
    y: 0,
    z: 0,
  },

  Scale:
  {
    x: 1,
    y: 1,
    z: 1,
  },
};
///////////////////////////////////////////////////////////////////////////////////



//
// エントリーポイント
//
function main() {
  const canvas = document.querySelector('#glcanvas');
  const gl = canvas.getContext('webgl');


  //webGLコンテキストの作成に失敗した時
  if (!gl) {
    alert("webGLコンテキストの作成失敗");
    return;
  }

  // 頂点シェーダーコード
  const vsSource = `
    attribute vec4 aVertexPosition;

    uniform mat4 uModelViewMatrix;
    uniform mat4 uProjectionMatrix;

    void main() {
      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
    }
  `;

  // フラグメントシェーダー
  const fsSource = `
    void main() {
      gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
    }
  `;

  //シェーダープログラムを作成
  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);


  const programInfo = {
    program: shaderProgram,
    attribLocations: {
      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
    },

    uniformLocations: {
      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
    },
  };

  //描画するオブジェクト
  const buffers = initBuffers(gl);


  //キー入力
  InputKey();



  //描画
  drawScene(gl, programInfo, buffers);
}


//キー入力
function InputKey()
{

//////////////////////////////////////////////////////////////////////////////////////////////
//ここのコードです。　キー入力部
//////////////////////////////////////////////////////////////////////////////////////////////  
  document.body.addEventListener("keydown",event => {

    //スペースキー
    if(event.key == " ")
    {
          //alert("キーが押されました。");
          console.log("Space");
    }
    else if(event.key == "ArrowLeft")
    {
          //alert("キーが押されました。");
          console.log("Left");
          model.Translate.x += 1;
    }
    else if(event.key == "ArrowRight")
    {
          //alert("キーが押されました。");
          console.log("Right");
          model.Translate.x += -1;

    }
    else if(event.key == "ArrowUp")
    {
          //alert("キーが押されました。");
          console.log("Up");
    }
    else if(event.key == "ArrowDown")
    {
          //alert("キーが押されました。");
          console.log("Down");
    }

//////////////////////////////////////////////////////////////////////////////////////////////




});

}



//バッファを初期化
function initBuffers(gl) 
{

  // 正方形の位置用のバッファを作成します。
  const positionBuffer = gl.createBuffer();

  //バッファを適用
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  //正方形の頂点の配列
  const positions = [
     1.0,  1.0,
    -1.0,  1.0,
     1.0, -1.0,
    -1.0, -1.0,
  ];

  //バッファーオブジェクトのデータストアを初期化
  gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(positions),gl.STATIC_DRAW);

  return {
    position: positionBuffer,
  };
}


//シーンを描画
function drawScene(gl, programInfo, buffers) 
{
  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // カラーバッファを初期化
  gl.clearDepth(1.0);                 // 深度バッファを初期化
  gl.enable(gl.DEPTH_TEST);           // 深度テスト
  gl.depthFunc(gl.LEQUAL);            // 深度比較する値を設定

  //キャンバスに描画を開始する前に、キャンバスをクリア
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);


  //パースペクティブマトリックスを作成します
  const fieldOfView = 45 * Math.PI / 180;   // in radians
  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const zNear = 0.1;
  const zFar = 100.0;

  //射形行列
  const projectionMatrix = mat4.create();
  mat4.perspective(projectionMatrix,fieldOfView,aspect,zNear,zFar);
/////////////////////////////////////////////////////////////////////////////////////////////////////////
  //ビュー行列

  //平行移動
  let translate = new mat4.create();
  mat4.translate(translate,translate,[model.Translate.x,model.Translate.y,model.Translate.z]); 

  //回転
  let rotation = new mat4.create();
  mat4.rotate(rotation,rotation,0,[model.Rotate.x,model.Rotate.y,model.Rotate.z]); 

  //拡大縮小
  let scale = new mat4.create();
  mat4.scale(scale,scale,[model.Scale.x,model.Scale.y,model.Scale.z]); 
/////////////////////////////////////////////////////////////////////////////////////////////////////////

// translate * rotate * scale
  let modelViewMatrix = new mat4.create();
  let rs = new mat4.create();
  let trs = new mat4.create();
  mat4.multiply(rs,rotation,scale);
  mat4.multiply(trs,translate,rs);
  modelViewMatrix = trs;
  
  
  
  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);                                          //バッファーを適用
  gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition,2,gl.FLOAT,false,0,0);   //バッファーの頂点属性を統合
  gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);                    //バッファーの頂点属性を有効化
  
  //シェーダーを使う
  gl.useProgram(programInfo.program);

  // uniform 変数を設定
  gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix,false,projectionMatrix);
  gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix,false,modelViewMatrix);

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);  //描画



}

//シェーダーを作成
function initShaderProgram(gl, vsSource, fsSource) 
{
  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

  //シェーダープログラムを作成
  const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);

  // もしシェーダープログラムの作成に失敗したら
  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert('シェーダープログラム作成に失敗:  ' + gl.getProgramInfoLog(shaderProgram));
    return null;
  }

  return shaderProgram;
}

//シェーダーをロード
function loadShader(gl, type, source) 
{
  const shader = gl.createShader(type);

  // ソースをシェーダーオブジェクトに送信します
  gl.shaderSource(shader, source);

  // コンパイルシェーダー
  gl.compileShader(shader);

  // コンパイルが成功したかどうか？
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }

  return shader;
}

  window.onload = main;  //実行

Comments

[1T2R3M4]

//コメント内部のコード
コメント内部にコードは見当たりませんが。

ところで、
この質問も削除するのですか。

[退会済みユーザー]

マイナス評価がたくさんついて迷惑だと思ったら削除する予定です。

[m.ts10806]

どちらの観点ですか？
「うわぁ低評価いっぱいついちゃったよ。邪魔しやがって。消しちゃえ！」
か
「こんな低評価つくような質問をして申し訳ない。削除してやり直そう」
か。

前者なら自身の意識を改めない限りまともなアドバイスが得られるはずがなく、後者なら低評価や指摘にあわせて修正すべきです。

[退会済みユーザー]

自分としては丸投げしているつもりはないのですが最近の質問では何が原因なのでしょうか？教えてくれますか？

[m.ts10806]

観点自身ではなく回答者にしたら良いですよ。
そうしなくても、「質問するときのヒント」「推奨していない質問」のページと照らし合わせれば明白かと思いますが。

[退会済みユーザー]

そうなのですか。毎回自分で何を行ったかを書くようにして丸投げにならないよう努力しているのですがそう見えるものなのですね。

[K_3578]

因みに貴方の質問が丸投げと評されているのは貴方がいつまで経っても基礎を学ばずに応用をしようと
し続けているからです。
アカウントを削除して作り直しても質問の仕方で誰かと言うことはすぐにわかります。

中には貴方の質問が挙がったら中身を見ずに低評価している人も居るかもしれませんね。
(大体投稿されてすぐに低評価いくつか付いてますし)

まず入門してからにしてください。貴方のやっていることはバットの振り方も知らずに
プロ野球選手にしてくれと言っているようなものです。

[退会済みユーザー]

何が入門なのでしょうか？ちゃんと自分のコードを読んでいるのですが？

[m.ts10806]

自分がどう思うかじゃなく、見る人がどう思うかでしょ。
よく子供なんかは親に注意されて「やるよ！やってるよ！」って返すけど、そもそもやってないから注意されるわけです。
観点が自分しかないからわからないだけ。客観的な観点なら既にサイトのヘルプに明文化されている。

[K_3578]

500件以上質問しておいてやってることが回答者から得たコードをちょっと書き換えた→動かなくなった→質問→低評価→質問削除しかやってない人が信用されていると思いますか？
普通に学ぶ意欲と姿勢があれば500件も質問なんかしませんよ。異常です。

[退会済みユーザー]

> 自分としては丸投げしているつもりはないのですが最近の質問では何が原因なのでしょうか？教えてくれますか？

下記ページに書いてある事を全て実践すれば、少なくとも丸投げとは判断されないと思いますよ。まあ、既に過去何度も指摘されているでしょうけど。（そもそも実践していたら、質問するまでもなく解決してそうな質問が殆どですが）
[質問するときのヒント]
https://teratail.com/help/question-tips

とりあえず、質問する前にもう少し自分で考えたり、調べる努力をしましょう。開発者の能力は、そういう所から身に付いていき成長に繋がっていくので、それをサボって人に頼ってばかりでは、本当に何も出来ないまま時間だけ過ぎていきますよ。それで何も危機感を覚えないなら、別にそれでいいですけど。考える・調べるという作業自体が嫌いなら、根本的に開発者に向いていないと思います。

[退会済みユーザー]

専門学校に通っていたのですがが卒業してしまったのでここに行きついてしまいました。

[K_3578]

なぜ専門学校に通っていて就職していないのか･･･。

こんなこと暇があったら職の一つでも探したらどうですか。

[退会済みユーザー]

手帳持ちなので上手くいきませんでした。経済的な問題でまた学校に通う定期券も買えないためここに行きつきました。

[m.ts10806]

ほら、指摘をまたスルーする。
低評価欲しくてわざとやってるの？って思われてもおかしくない。

Answer 1

window.requestAnimationFrame();関数を使って指定した関数を呼び出して次の再描画の前にアニメーションを更新することで実現しました。

リファレンス: https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame

window.requestAnimationFrame(Update);