easy-three
Eng日本語

event.key

event.key.add(callback : Function, option: Object) : Function

callback(key, e)- コールバック関数。
  • key (String) : イベントが発生した原因となったキー文字列。
  • e (KeyEvent) : イベントオブジェクト。
option - 設定オブジェクト。
  • type (String) : イベントのリスナータイプ (デフォルト : "once")。
  • trigger (String | RegExp) : 追加のイベント発生条件 (デフォルト : /[A-Za-z]/)。

キーボードイベント追加関数。
キーボードのイベントに反応する関数を登録します。
キーボードのキーが

  1. 押された時
  2. 離された時
  3. 押して離された時
  4. 上記のすべての時

の動作を指定できます。
イベントの登録解除用関数を返します。

div要素などをキャンバスのコンテナとして利用する場合は、 その要素のtabIndex属性に0を設定しなければキーイベントを取得できません。

また、スマートフォンなどのタッチデバイスにおいては ソフトウェアキーボードを表示するための処理が必要となります。
コンテナにcontentEditable属性を設定しつつコンテナに文字を入れない方法や、input要素をブリッジするなどの方法が考えられます。

コードの例

マウスイベントの利用

キャンバスをクリックしてからキー入力すると、その文字が表示されます。
スマートフォンなどのタッチデバイスには対応していません。

const { camera, create, event, controls, animate } = init()
create.ambientLight();
create.directionalLight();
camera.position.set(0, 0, 1);
controls.connect();

const text = create.text("Press Key", { fontSize: 20 })

event.key.add((key, e) => {
  text.material.map.dispose();
  text.material.map = create.textTexture(key, { fontSize: 140 })
  text.material.needsUpdate = true;
});

animate();