Comment mettre à jour des uniformes dans Three.js

Question

Je suis en train d'apprendre Three.js. En ce moment j'adapte un shader que j'ai fait dans Shader Toy pour aller sur ma propre page web. C'est un shader de terrain procédural où l'utilisateur peut se déplacer avec les touches WASD. Actuellement, tout fonctionne sauf le mouvement. La position est déclarée en javascript comme suit:

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

mettre à jour la valeur de pos avec un écouteur d'événement:

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; 
} 
}); 

La valeur est d'abord passée au shader frag dans la déclaration du matériau de shaders :

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}, 
    } 
}); 

et la valeur mise à jour est transmise au nuanceur dans le second avant-dernière ligne de la fonction render:

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); 
} 

Je ne sais pas ce qui pourrait aller mal ici mais j'attendre à ce qu'elle a quelque chose à voir avec l'écouteur d'événement depuis son existence, la seule différence de la nature de tous les autres uniformes. J'espère que je n'ai pas fait une erreur idiote, comme je l'ai dit, je viens de commencer à apprendre ces bibliothèques.

MISE À JOUR:

j'ai essayé de prendre la place d'entrée de la même façon que je suis avec la souris. à savoir l'ajout d'une fonction aux 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; 
    } 
} 

puis dans le code HTML:

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

Le shader est encore insensible à l'entrée au clavier.

Answer 1

C'est pas keycode dans firefox.