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

该值最初在着色器材质的声明中传递给frag着色器：

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中的制服

1 个答案: