如何更新Three.js中的制服

问题描述：

我正在学习Three.js。现在我正在调整Shader Toy制作的着色器，以便在我自己的网页上进行。这是一个程序性地形着色器，用户可以使用WASD键移动。目前，除了运动之外，一切都在运转。的位置以JavaScript声明如下：如何更新Three.js中的制服

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

我也不知道出了什么问题怎么回事，但我希望它有什么做的事件监听器，因为它的存在，从所有其他制服的性质，唯一的区别。希望我没有犯过一个愚蠢的错误，就像我说的，我刚刚开始学习这些库。

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)"/>

着色器仍然不响应键盘输入。

也许[这可能]（https://jsfiddle.net/2pha/bhbn1sb8/）帮助你 – 2pha

究竟发生了什么？您不必每次都将“pos”分配给制服，只需通过参考即可传递一次，并更改原始内容。 – pailhead

@palihead几乎eveything正在工作：sccene正在渲染，因为我期望它是和相机正在响应鼠标移动到画布上。只是当我按下任何按键时什么都不会发生，更不用说WASD了。那真的是吗？我现在要试一试。 –

答

这是keyCode不是keycode在Firefox中。

如何更新Three.js中的制服

相关推荐