如何在 Three.js 中更新制服

Question

我正在学习Three.js。现在我正在调整我在 Shader Toy 中制作的着色器，以便在我自己的网页上使用。这是一个程序地形着色器，用户可以使用 WASD 键四处移动。目前，一切正常，除了运动。在javascript中声明的位置如下：

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

我用事件侦听器更新 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;
}
});

该值最初是在着色器的声明中传递给片段着色器的 material:

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 函数倒数第二行中的着色器：

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

我不知道这里可能出了什么问题，但我希望它与事件侦听器有关，因为它的存在是与所有其他制服的性质唯一的区别。希望我没有犯一个愚蠢的错误，就像我说的那样，我才刚刚开始学习这些库。

更新：

我尝试用与鼠标相同的方式进行输入。即向 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。

如何在 Three.js 中更新制服

How to update uniforms in Three.js

javascript

fragment-shader

three.js