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

Question

这里是小白/

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

我这里有这个东西：

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 是否更好？并以某种方式操纵它？

之前没有编码经验，您看到的所有内容都是我通过谷歌搜索拼凑而成的。

提前谢谢大家

J

Answer 1

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

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

或者：

当按钮数量很多但每个按钮都应该单独按下时，switch语句非常有用：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

有任何优势

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

different key press events - different actions. How to? + 3D and JSON

javascript

json

three.js

keypress