Playcanvas 로 웹에 3D 띄우기- 1

안녕하세요
오늘은 Playcanvas 로 웹 상에서의 3D를 구현해보도록 하겠습니다.
Three.js 만 하다가 하니까 굉장히 편하고 좋습니다 따봉

Playcanvas 와 Three.js 의 차이점으로는 Playcanvas 는 웹 게임 엔진이고 Three.js는 3D 그래픽 라이브러리로 설계되었다고 하네요.
그래서 Three.js는 게임 논리나 물리 시뮬레이션 이런 것들을 직접 구현해야한다고 합니다.

보통 Three.js 는 3D 모델을 렌더링하고 인터랙티브한 웹을 구현하는데 사용되고, Playcanvas 는 웹 게임이나 메타버스 등에 사용되는 듯 합니다.

Three.js 는 커뮤니티가 크고 한국어 자료가 꽤 많아서 공부하기 쉽습니다.
Playcanvas 는 한국어 자료가 거의 없고 프론트엔드보단 unity쪽 개념과 일맥상통하는 듯 합니다.

국내에서 Playcanvas 만든 프로젝트 중에 가장 유명한건 카카오 춘식이 관찰일기 일 것 같습니다. 더즈인터랙티브에서 만들었습니다

아무튼 오늘부터는 Playcanvas의 tutorials 보면서 하나씩 써보도록 하겠습니다.

---

시작하기

Playcanvas

우선 Playcanvas 공식 홈에 가서 로그인부터 해주시고 오시면

이렇게 user 페이지가 뜰 겁니다.

일단 여기서 보실건 제가 동그라미 쳐둔 것만 보시면 됩니다. 나머진 클릭해서 알아보세요
1번 NEW -> 새 프로젝트 만들기
2번 -> 만들어둔 프로젝트
3번 -> 용량 주의하세요 우린 Free 요금제이니까..

자 이제 NEW 를 눌러서 새 프로젝트 만들겠습니다.

사진처럼 Model Viewer를 클릭하고 만들어주세요.

저는 빠르게 블로그를 쓰고 싶으니 Model Viewer로 만들었습니다.
새 프로젝트 진행하실 땐 Blank Project 선택하시고 하시면 됩니다.

그러면 아래 사진처럼 뜹니다. 여기서 EDITOR 버튼을 클릭해주세요.

자 그럼 우리는 Playcanvas 프로젝트를 만들고 EDITOR 까지 열었습니다.

처음에 보시면 이게 뭔가 당황하실 수 있습니다. Unity 같은 3D 엔진 사용하셨던 분이라면 쉬우실테지만 저는 해본적이 없기 때문에 하나씩 보겠습니다.

어휴 그림판 죄송합니다

왼쪽에 있는 HIERARCHY 는 Entity들의 계층 구조를 나타냅니다. Figma 보시면 왼쪽에 있는 이런 느낌입니다.

가운데 크게 위치한건 Scene 입니다.
아래에 위치한건 프로젝트 폴더입니다.

이런 textures나 scripts 에 뭐가 있는지 파악할 수 있습니다.

---

자 이제 Launch 버튼을 눌러서 실행시켜 보겠습니다.

새 창으로 3D 개체가 뜨는데요.
마우스로 화면을 잡아보시면 기본적으로 orbitCamera가 적용되어 있습니다. 화면이 빙글빙글 돌죠

Blank Project로 아무것도 없는 프로젝트를 파서 실행해보시면 전혀 움직이지 않습니다.

왼쪽이 Model Viewer 프로젝트의 HIERARCHY 고 오른쪽이 Blank project인데 무슨 차이일까요

왼쪽에는 Camera 옆 아이콘에 <> 이런 스크립트 같이 생긴 아이콘이 있죠

Playcanvas 는 Entity에 Script를 연결하면 저렇게 나 스크립트 달린 엔티티다 하고 아이콘이 티를 내줍니다.

오른쪽이 순정이고 왼쪽이 스크립트 튜닝 상태입니다

그래서 눌러보시면

사진이 너무 크네요 어쩔 수 없습니다 크게 보세요

ENTITY / CAMERA / SCRIPT 이렇게 되어 있죠

ENTITY 안에 CAMERA가 붙어있고 거기에 SCRIPT 가 연결되어 있습니다.

우선 SCRIPT 쪽을 봅시다.

익숙한 orbitCamera와 딱봐도 touch, mouse,keyboard 입력 처리하는 스크립트들이 다닥다닥 붙어있습니다.

그런데 저 옆에 Auto Render 이런건 뭘까요
한번 EDIT을 눌러서 뜯어보겠습니다.

orbitCamera 펜 모양을 눌러주세요.

자 그러면 새 창으로 코드 에디터가 뜹니다.

이것이 orbitCamera 스크립트이군요~
Three.js 에서는 new OrbitContorls 로 간단하게 썼던 것 같은데 뭔가 열심히 구현되어 있으니 당황스럽습니다.

하지만 우린 이걸 건들 필요가 없으니 그냥 잘 쓰면 됩니다. good~

그래서 코드 윗 부분을 보시면

이렇게 스크립트의 attribute를 생성해서 editor의 UI에 띄울 수 있습니다. 이렇게 하면 editor에서 입력받은 값 대로 스크립트 값으로 쓸 수 있겠죠 ?

예를 들어서 autoRender 가 어떻게 쓰이는지를 한번 따라가 보겠습니다. autoRender를 집고 ctrl+F를 눌러보시면

자 이런 함수에서 쓰고 있다고 하네요.
이런식으로 attr 에서 값을 입력 받아서 처리합니다.

다른 attributes 값들도 이런식으로 사용되고 있군요

자 다음은 mouseInput 코드를 한번 살펴보겠습니다.
touch나 keyboard도 동작하는 건 동일하니 mouseInput만 볼게요.

아까 orbit-camera에서 본 것 같이 attr 가 있고
그 밑에 함수가 쭉쭉 있습니다.

attr 밑에 있는 initialize 함수부터 보기 전에,
새로운 스크립트를 생성할 때 기본 구성을 한번 보겠습니다.

new 라는 스크립트를 하나 만들었구요.

주석에 적힌 것 같이 initialize 와 update 함수가 기본적으로 만들어집니다.

initialize 는 엔티티에 대해 딱 한번 호출이 되고, update 함수는 매 프레임마다 업데이트가 됩니다.

log를 찍어볼게요.

Editor 창으로 다시 가셔서 camera script로 연결해보겠습니다.

노란 부분을 마우스로 클릭하시면 제가 방금 만든 new script가 딱 뜨죠? 누르면 연결되었습니다.

자 그리고 Launch 를 눌러서 열어보시면

이렇게 console 에 한번 찍힌 init 과 update를 확인하실 수 있습니다.

자 그럼 다시 돌아가서 moseInput 스크립트를 봅시다.

init 함수에서 뭔가 여러개를 하고 있죠.
대충 orbitCamera가 있다면 마우스 동작을 한다 이런 내용입니다.

this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);

이 부분만 보자면

지금 내가(스크립트) 달린 객체 (this.app) 에 mouse이벤트에 이벤트 리스너 등록해 라는 것입니다.

마우스 클릭이 감지될 때 onMouseDown 함수가 호출 됩니다.
자 그래서 또 따라가봅시다.

onMouseDown 함수에서는 마우스 왼쪽, 가운데, 오른쪽 마우스 버튼 클릭 시에 수행할 동작을 정하고 있었네요.

그렇다면 마우스가 움직일땐 뭘 할까요

this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);

또 찾아가봅시다

여기서는 마우스 이동에 따라서 카메라 회전과 이동을 조정하고 있었군요

자 이런식으로 이루어진 orbitCamera와 mouseInput 스크립트로 화면을 자유자재로 움직일 수 있다는 것을 알았습니다~

---

다른 Entity를 추가하고 기능을 붙이는 다음 포스팅에 이어 작성하겠습니다~

캡처하고 설명 쓰는게 시간이 오래 걸리네요

더 관심이 있으신 분들은 아래 링크를 참고하셔서 다양한 Playcanvas 예제를 보고 따라해보세요👍

1. Playcanvas tutorials
2. PlayCanvas user-manual
3. Playcanvas 다양한 예제들
4. BMW i8 configurator