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

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

本文关键字：+3D JSON 如何 事件      更新时间：2023-09-26

Js noob here/

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

我这里有一个东西：

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按钮，按键使图像改变

我想制作整个字母表。

还有一件事，总的来说，这是一个聪明的方式来做这种排版动画吗？我把它渲染成一个三维对象，所以我想知道使用THRE.js库并将我的三维模型导入为JSON是否更好？以某种方式操纵它？

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

提前感谢各位

J

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

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

或者：

  1. 当按钮数量很大，但每个按钮都应该单独按下时，switch语句非常有用：http://www.w3schools.com/js/js_switch.asp

    switch(e.keyCode){
   case 65:
       //do this
       break; 
   case 66:
       ...
}

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

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

  3. 这两种的组合

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

相关文章：