Three.JSを使用した単一キープレスでのアニメーション方法

Question

アニメーションのような滑らかな方向にキューブを移動しようとしていますが、キーを1回押すだけです。私はキーを押しながらアニメーションを作成することしかできませんでした。ここで

は、私が使用してきたいくつかのコードです：

<script> 
    function init() { 
... other code needed .... 
      document.addEventListener("keydown", onDocumentKeyDown, false); 
        }; 

      function onDocumentKeyDown(event) { 
       var key = event.which; 
       if (key == 37) { 
        leftAnimation();  
       } 
      }; 
      function leftAnimation() { 
       var timer = 0.0001 * Date.now(); 
       for(var v = 0; v < 10; v++){ 
        cube.position.x = Math.cos(timer) * v; 
       } 
       animate();  
      } 
      function animate() { 
       requestAnimationFrame(animate); 
       render(); 
      }; 
      function render() { 
       renderer.render(scene, camera); 
      } 
      init(); 
      animate(); 
</script> 

Answer 1

leftAnimation()は、フレームは、キューブは単なるアニメーション、微調整していないように見えるということで結果として更新される前に、全体の内部ループを実行している一度だけ実行されます。

たとえば、nullに初期化された固定動きベクトルを使用できます。次にキーを押すとx/y [/ z]方向に初期化され、キューブを移動します。

一方、nullでないときは、現在のベクトルをキューブの位置に追加します。例えば

：

// code initialized at this point ... 

// vector for motion 
var vector = null; 

// key handler 
document.onkeydown = function(e) { 
    e.preventDefault(); 
    if (e.keyCode === 37) {    // left 
    vector = {x: -0.02, y: 0, z: 0}; // fixed vector 
    } 
}; 

(function loop() { 
    requestAnimationFrame(loop); 
    render(); 
    if (vector) { // any vector set? if so update position with vector deltas 
    cubeMesh.position.x += vector.x; 
    cubeMesh.position.y += vector.y; 
    cubeMesh.position.z += vector.z; 
    } 
})(); 

// render functions here etc. ... 

Live example

代替が累積ベクトルキーが追加またはベクターを引く0で前に初期化を使用することです - これは、あなたが「微調整」することができますあなたが望む方向でスピード：

// vector for motion 
var vector = {x: 0, y: 0, z: 0}; 

// key handler 
document.onkeydown = function(e) { 
    e.preventDefault(); 
    if (e.keyCode === 37) {  // left 
    vector.x -= 0.002; 
    } 
    else if (e.keyCode === 39) { // right 
    vector.x += 0.002; 
    } 
}; 

(function loop() { 
    requestAnimationFrame(loop); 
    render(); 
    cubeMesh.position.x += vector.x; 
    cubeMesh.position.y += vector.y; 
    cubeMesh.position.z += vector.z; 
})(); 

Live example

ちょっとだけ聞いたことがありますが、アイディアをよりよく理解するために、x方向に移動したい場合は、変数x /変数を1つだけ使用するだけです。必要に応じて採用する。