Three.js-key event

Three.js - 키이벤트 (key event)

basicStructure2.zip

4.57MB

Up to the previous chapter, we have created a basic 3d scene and created a file structure for coding.
This time, let's link the key events and mouse events in detail, and create a menu that is useful for us, and we will connect the 3d scene organically.

key event
Key events have a default event provided by the browser, which is inconvenient to organize a general web page. The biggest problem is that multiple events are caught when the key is pressed. Usually no user will do that. If you press A key, you want A key to be entered only once.
Many libraries that support key events are already made. Jquery is also possible, and I decided to choose a library that focuses only on key events.

이전 장까지 3d 기본 scene을 만들고, 코딩의 위한 파일 구조를 만들었습니다.

이번에는 디테일하게 키 이벤트, 마우스 이벤트를 쓰기 좋게 연결해보고, 또 많이 쓸만한 메뉴를 만들어서, 3d scene과 유기적으로 연결해 보도록 하겠습니다.

 

key event

키이벤트는 브라우져에서 제공하는 기본 이벤트가 있는데, 일반적인 웹페이지를 구성하는데는 불편함이 많습니다. 가장 큰 문제가 키를 눌렀을때, 이벤트가 복수로 잡히는 문제입니다. 보통 그렇게 쓸 이용자는 없을겁니다. A키를 누르면 A키가 한번만 입력되길 바라겠죠.

키이벤트를 서포트해주는 라이브러리는 이미 많이 만들어져 있습니다. Jquery도 가능한데, 저는 딱 key event에만 집중하는 라이브러리를 고르기로 했습니다. 

https://dmauro.github.io/Keypress/

Keypress: A Javascript library for capturing input

Please refer to the site for a detailed implementation.

It's okay to put the key event library globally, so add it to index.html.

상세 구현은 사이트를 참조하시길 바랍니다.

 

키이벤트 라이브러리도 전역으로 넣어도 문제없다 생각되어서 index.html에 추가해줍니다.

index.html

Add another event folder and try a simple implementation.

event 폴더를 하나 더 추가하고, 간단한 구현을 해봅니다.

keyProcess.js

The code here is an implementation of keypress. When the 'a' key is pressed, an event is triggered when the 'on_keydown' is pressed and 'prevent_repeat' is set to prevent repetitive entry. It's a neat implementation. It prints 'a' when pressed.

Registering this code on MainPage registers the event.

여기 코드는 keypress의 구현입니다. 'a'키를 누를때, 'on_keydown' 누를때 이벤트가 발생하고, 'prevent_repeat' 를 설정함으로써, 반복 입력을 막고 있습니다. 깔끔한 구현이네요. 누를때 'a'를 출력해줍니다.

 

MainPage에 이 코드를 등록시키면 이벤트가 등록됩니다.

result

결과

You can see that it prints well.

Let's do some more meaningful output.
Now, the human character has 'walk' and 'run' animations registered.
Let's move the animation to 'w'-> 'walk', 'r'-> 'run'.

Continues to the next chapter.

잘 출력되는걸 볼수 있습니다.

 

조금 더 의미있는 출력을 해봅시다.

지금, 휴먼 케릭터에는 'walk', 'run' 에니메이션이 등록되어있습니다.

'w'-> 'walk', 'r'-> 'run' 을 에니메이션을 움직이도록 해봅시다.

 

다음 장에 이어집니다.