跳到主要内容

基础键盘输入

点击以获取焦点，然后按左方向键、右方向键和空格键旋转立方体。按下并松开 A 键可改变颜色。

PlayCanvas 引擎通过 pc.Keyboard 对象处理键盘输入。Keyboard 对象提供简单的接口， 用于检查按键刚刚按下或持续按住等常见操作，同时屏蔽不同浏览器 在处理键码和字符码时的差异。

请查看教程项目中的键盘输入场景。教程代码如下：

var KeyboardHandler = pc.createScript('keyboardHandler');

KeyboardHandler.attributes.add('redMaterial', {
    type: 'asset',
    assetType: 'material'
});

KeyboardHandler.attributes.add('whiteMaterial', {
    type: 'asset',
    assetType: 'material'
});

// initialize code called once per entity
KeyboardHandler.prototype.initialize = function() {
    // Use on() to listen for events on the keyboard device.
    // Arguments are:
    // 1) The event name to listen for
    // 2) The callback function to call when the event fires
    // 3) (optional) The value to use for 'this' in the callback function

    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.onKeyDown, this);
    this.app.keyboard.on(pc.EVENT_KEYUP, this.onKeyUp, this);
};

// update code called every frame
KeyboardHandler.prototype.update = function(dt) {
    /*
     * Notice in the demo that pressing and holding the arrow keys doesn't
     * make the block spin. wasPressed() is used to detect a
     * keypress that occurred since the last frame and will only be
     * called once even if the key is held down.
     */
    var angle = 0;
    if (this.app.keyboard.wasPressed(pc.KEY_LEFT)) {
        angle = -5;
    } else if (this.app.keyboard.wasPressed(pc.KEY_RIGHT)) {
        angle = 5;
    }

    /*
     * Notice that pressing and holding the space bar makes the block
     * continuously spin. isPressed() is used to detected if a
     * key is down right now. So it will be true every frame as long as
     * the key is still pressed.
     */
    if (this.app.keyboard.isPressed(pc.KEY_SPACE)) {
        angle = 1;
    }

    // Update the spinning cube
    this.entity.rotateLocal(0, angle, 0);
};

/*
* Event handler called when key is pressed
*/
KeyboardHandler.prototype.onKeyDown = function (event) {
    // Check event.key to detect which key has been pressed
    if (event.key === pc.KEY_A && this.redMaterial) {
        this.entity.render.meshInstances[0].material = this.redMaterial.resource;
    }

    // When the space bar is pressed this scrolls the window.
    // Calling preventDefault() on the original browser event stops this.
    event.preventDefault();
};

/*
* Event handler called when key is released
*/
KeyboardHandler.prototype.onKeyUp = function (event) {
    // Check event.key to detect which key has been pressed
    if (event.key === pc.KEY_A && this.whiteMaterial) {
        this.entity.render.meshInstances[0].material = this.whiteMaterial.resource;
    }
};

检测键盘输入有两种方式。第一种是在脚本的 update 方法中使用 isPressed() 和 wasPressed()，检查按键当前是否按住或是否刚刚按下。第二种是使用事件，在按键按下或松开时立即响应。

isPressed 与 wasPressed​

上面的演示展示了 isPressed() 和 wasPressed() 在行为上的区别。

按住左方向键或右方向键时，立方体只会旋转一次，角度为 5°。这是因为 wasPressed() 只在按键按下后的第一帧返回 true。

按住空格键时，立方体会每帧持续旋转 1°，因为只要按键保持按下，isPressed() 就会在每一帧返回 true。

isPressed(key)​

isPressed(key) 检查 key 当前是否按下。如果是，则返回 true；在按住期间的每一帧都会返回 true。

wasPressed(key)​

wasPressed(key) 检查 key 是否自上一帧以来被按下。每次按键操作只会让 wasPressed() 返回一次 true。

事件​

处理按键的第二种方式是监听事件。Keyboard 设备支持以下两种键盘事件：

  • pc.EVENT_KEYDOWN
  • pc.EVENT_KEYUP

不同浏览器对 DOM 键盘事件的实现各有差异，因此 PlayCanvas 引擎在 pc.Keyboard 对象上提供统一事件，使同一份代码可以在各处运行。键盘事件触发时，处理函数会收到 pc.KeyboardEvent 对象，其中包含按下或松开按键的键码。

注意，我们还向 on() 传入了第三个参数 this，即脚本实例本身。on() 的第三个参数决定事件回调中的 this，因此这里必须显式传入，否则它不会指向正确的对象。

键码​

键码用于识别被按下的按键，每个数值对应键盘上的一个键。例如，pc.KEY_A 对应 A 键，pc.KEY_LEFT 对应左方向键。

请始终使用 pc.KEY_* 枚举，而不要直接使用数值，因为这些常量的实际数值将来可能发生变化。

动手试试​

在此处全屏体验，或直接使用页面顶部的示例。比较轻按和按住方向键、轻按和按住空格键的区别。