不同的按键事件 - 不同的动作。如何？ + 3D 和 JSON答案

【问题标题】：different key press events - different actions. How to? + 3D and JSON不同的按键事件 - 不同的动作。如何？ + 3D 和 JSON
【发布时间】：2015-03-06 03:32:26
【问题描述】：

这里是菜鸟/

这是一个关于几个按键事件的问题，以及如何将它们绑定到不同的操作。

我这里有这个东西：

var imga = ["http://img1.jpegbay.com/gallery/004236128/1_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/2_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/3_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/4_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/5_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/6_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/7_t.jpg",
"http://img1.jpegbay.com/gallery/004236128/8_t.jpg",
];
var imgb = ["http://img1.jpegbay.com/gallery/004236316/1_t.jpg",
"http://img1.jpegbay.com/gallery/004236316/2_t.jpg",
"http://img1.jpegbay.com/gallery/004236316/3_t.jpg"
];
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
if (e.keyCode == "65") {
    changeImage(-1);
}
if (e.keyCode == "66") {
    changeImage(-1);
}
};

function changeImage(dir) {
var img = document.getElementById("imgClickAndChange");
img.src = imga[imga.indexOf(img.src)+dir] || imga[(dir==1) ? 0 :         imga.length-1];
var img = document.getElementById("b");
img.src = imgb[imgb.indexOf(img.src)+dir] || imgb[(dir==1) ? 0 : imgb.length-1];

}

它也在 jsfiddle 上：

http://jsfiddle.net/k3wxhc58/39/

所以两个字母，两个图像批次，最上面的一个连接到A按钮，另一个应该连接到B按钮，按键使图像发生变化

我想制作整个字母表。

还有一件事，一般来说，做这个印刷动画是一种聪明的方法吗？我将它渲染为 3d 对象，所以我想知道使用 THREE.js 库并将我的 3d 模型导入为 JSON 是否更好？并以某种方式操纵它？

没有以前的编码经验，你看到的一切都是我通过谷歌搜索粘在一起的东西。

先谢谢各位了

【问题讨论】：

标签： javascript json three.js keypress

【解决方案1】：

对于键盘，这是一个偏好问题。你所做的对几个键有好处，我假设你知道你正在使用'keydown'，所以每次按下键时都会触发一次动作。根据需要（我希望触发一次或只要按键按下，我想听的按键数量以及是否希望它们同时工作）我使用不同的方法：

如果您想使用 Three.js，最简单的方法之一是使用 THREEx.KeyboardState：http://learningthreejs.com/data/THREEx/docs/THREEx.KeyboardState.html

或者：

当按钮的数量很多但每个按钮都应该单独按下时，switchstatement 非常有用：http://www.w3schools.com/js/js_switch.asp
```
switch(e.keyCode){
   case 65:
       //do this
       break; 
   case 66:
       ...
}
```

当同时按下一些键很重要时，您可以创建一个对象，然后将按下的键添加到其中。其他函数从对象获取状态：

var down_keys = {}
document.addEventListener( "keydown" , function(e){
    down_keys[ e.keyCode ] = true;
})

document.addEventListener( "keyup" , function(e){
    down_keys[ e.keyCode ] = false;
})

这两者的结合

关于第二个问题：对于高分辨率，逐张幻灯片动画是不切实际的。您还限制了帧速率。就个人而言，我认为使用图片创建动画而不是使用three.js 没有任何优势

【讨论】：