Three.jsの制服を更新するには

Question

私はThree.jsを学んでいます。今私はShader Toyで作ったシェーダを自分のWebページに適用するようになっています。ユーザーがWASDキーを使用して移動できる手続き型の地形シェーダです。現在、動きを除いてすべてが機能しています。

var pos = new THREE.Vector2(0, 0); 

Iは、イベントリスナーでposの値を更新：

window.addEventListener("keydown", function(event){ 
switch (event.keycode) { 
    case 65: pos.x -= 0.25; 
     break; 
    case 68: pos.x += 0.25; 
     break; 
    case 83: pos.y -= 0.25; 
     break; 
    case 87: pos.y += 0.25; 
     break; 
    default: return; 
} 
}); 

値が最初シェーダ材料の宣言にフラグ・シェーダーに渡されると、次のように位置がJavaScriptで宣言されています：

var shader = new THREE.ShaderMaterial({ 
    vertexShader: document.getElementById('vs').textContent, 
    fragmentShader: document.getElementById('fs').textContent, 
    depthWrite: false, 
    depthTest: false, 
    uniforms: { 
     res: {type: "v3", value: resolution}, 
     time: {type: "f", value: 0.0}, 
     deltaTime: {type: "f", value: 0.0}, 
     frame: {type: "i", value: 0}, 
     mouse: {type: "v4", value: mouse}, 
     pos: {type: "v2", value: pos}, 
    } 
}); 

と更新された値はrender機能の最後から2番目の行にシェーダに渡されます：

function render() { 
    requestAnimationFrame(render); 
    if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) { 
     renderer.setSize(canvas.clientWidth, canvas.clientHeight, false); 
     camera.aspect = canvas.clientWidth/canvas.clientHeight; 
     camera.updateProjectionMatrix(); 
     resolution = new THREE.Vector3(canvas.clientWidth, canvas.clientHeight, 1.0); 
    } 
    shader.uniforms['res'].value = resolution; 
    shader.uniforms['time'].value = clock.getElapsedTime(); 
    shader.uniforms['deltaTime'].value = clock.getDelta(); 
    shader.uniforms['frame'].value = 0; 
    shader.uniforms['mouse'].value = mouse; 
    shader.uniforms['pos'].value = pos; 
    renderer.render(scene, camera); 
} 

私はここで間違って行くことができるかわかりませんが、私はそれが他のすべての制服の自然からの唯一の違いの存在だから、それはイベントリスナーとは何かを持っていることを期待しています。うまくいけば私は愚かな間違いをしなかった、私が言ったように、私はちょうどこれらの図書館を学び始めた。

UPDATE：

私の代わりに入力私はマウスを使っています同じように取ってみました。すなわちJSに機能を追加する：

function readkeys(event){ 
    switch (event.keycode) { 
     case 65: pos.x -= 0.25; 
      break; 
     case 68: pos.x += 0.25; 
      break; 
     case 83: pos.y -= 0.25; 
      break; 
     case 87: pos.y += 0.25; 
      break; 
     default: return; 
    } 
} 

し、HTMLで：

<canvas id="canvas" onmousemove="readmouse(event)" keydown="readkeys(event)"/> 

シェーダは依然としてキーボード入力に応答しなくなりました。

Answer 1

FirefoxのkeyCodeではなくkeycodeです。