자바스크립트와 캔버스 썸네일형 리스트형 바빌론JS - 블랜더에서 만든거 불러오며 뒤집힘 문제 해결 지난 게시글에서는 바빌론JS 의 중력에 대해 알아보았는데요.https://itadventure.tistory.com/709 바빌론JS - 중력과 컬리젼바빌론JS의 컬리젼(Collision)에 대해 알아보았는데요.바빌론JS에서 중력과 같은 것을 가능하게 하는 것입니다.근데 이 컬리젼을 적용하려면 그동안 작업했던 것들을 포기하고 거의 새로 만들어야itadventure.tistory.com블렌더3D에서 제작한 모델 파일도 이렇게 순순히 잘 되면 좋으련만 그게 한번에 쉽게 안되는데요.해외 게시글을 찾아보니 오른손/왼손 좌표계 차이 문제라고도, 바빌론JS의 버그 때문일거라고도 하더군요.그래서 최소한의 간단한 해결책을 알아냈습니다 :)블렌더로 준비한 그라운드 평범한 바닥 대신 블랜더로 아래와 같이 바닥을 모델링하였.. 더보기 바빌론JS - 중력과 컬리젼 바빌론JS의 컬리젼(Collision)에 대해 알아보았는데요.바빌론JS에서 중력과 같은 것을 가능하게 하는 것입니다.근데 이 컬리젼을 적용하려면 그동안 작업했던 것들을 포기하고 거의 새로 만들어야 하다시피 하지 않겠습니까?하지만 그만큼 매력적이기도 하기에 케이군과 함께 새로 시작해보았습니다 :)지난 게시글 : https://itadventure.tistory.com/703 바빌론JS - 모바일웹에서 캐릭터 이동지난 시간 비를 피하던 케이군이 드디어 집을 얻었습니다.https://itadventure.tistory.com/701 바빌론JS - 비를 피하고 싶어!지난 시간에는 케이군의 진짜 정체를 알아보았습니다.https://itadventure.tistory.com/itadventure.tistory.co.. 더보기 바빌론JS - 타입 스크립트 + 웹팩 바빌론JS는 비주얼 스튜디오에서 타입 스크립트(Type Script)로 개발할 수 있다 해서 접해보니 와우~ 자동 완성 기능이 장난 아니네요. 예전에 설치한 코드 스니펫은 상대도 안됩니다.다만 타입스크립트 사용법을 약간 익혀야 하는데요.오늘은 그 부분을 다뤄보겠습니다.설치부터 해야 해타입 스크립트는 웹에서 바로 작동하지 않습니다. 컴파일이란걸 해야 하는데요.순서가 이렇게 됩니다.1) PC에서 타입스크립트(.ts)로 개발2) PC에서 컴파일3) html 과 컴파일된 자바스크립트 (.js) 파일을 서버에 업로드그러다보니 윈도우에 컴파일러인 node.js 를 설치해야 하는데요.아래 '진진이랑'님 게시글에 설치방법이 잘 나와 있으니 참조해 주세요 :)https://jin2rang.tistory.com/entry.. 더보기 바빌론JS - 모바일웹에서 캐릭터 이동 지난 시간 비를 피하던 케이군이 드디어 집을 얻었습니다.https://itadventure.tistory.com/701 바빌론JS - 비를 피하고 싶어!지난 시간에는 케이군의 진짜 정체를 알아보았습니다.https://itadventure.tistory.com/699 바빌론JS - 내 진짜 정체를 알려주지.지난 시간 카메라 주도권 쟁탈전을 벌이던 NPC군은 자신의 이름을 밝혔는데itadventure.tistory.com아쉬운 것은 모바일웹에서는 오류가 뜨는 문제가 있어 모바일웹 사용자분들에게는 실망감(?)을 안겨드렸는데요.(너는 나에게 실망감을 안겨 주었고~)신망감으로 바꿔드리는 시간을 가져 보겠습니다 :)오류의 원인은?개발자 도구(F12)에서 모바일 모드로 전환하면원인을 볼 수 있는데요.결론은 마우스 장.. 더보기 바빌론JS - GUI 에디터! 바빌론 JS 공식사이트에서 제공하는 GUI 에디터 페이지를 발견했습니다!https://gui.babylonjs.com/여기서 GUI 를 편집하고 다운받으면 바빌론js 자바스크립트 코드로 불러올수 있더군요.아주 간단히 예를 들자면 도구상자의 버튼을 클릭, 화면에 버튼을 띄운 다음에왼쪽창의 버튼 텍스트 요소를 선택오른쪽 창의 TEXTBLOCK 속성에서 'Click Me' 를 '나를 클릭하시오'로 변경그리고 저장하면 됩니다.그러면 파일이 다운로드되는데요.다운받은 파일을 main.js 와 같은 폴더에 넣고 파일명을 gui.json 으로 변경합니다.그리고 아래 코드를 이용하면 GUI 를 불러올 수 있습니다.const canvas = document.getElementById("renderCanvas");const.. 더보기 바빌론JS - 비를 피하고 싶어! 지난 시간에는 케이군의 진짜 정체를 알아보았습니다.https://itadventure.tistory.com/699 바빌론JS - 내 진짜 정체를 알려주지.지난 시간 카메라 주도권 쟁탈전을 벌이던 NPC군은 자신의 이름을 밝혔는데요.https://itadventure.tistory.com/698 바빌론JS - NPC, 내 이름은 케이!지난 시간 엄청난 기술들을 선보이며 1위 자리를 다시 탈itadventure.tistory.com케이군은 계속되는 비에 이제는 몸이 추워 으슬으슬하다고 하는군요.그러면서 몸을 피할 곳이 있으면 좋겠다고 합니다.그러고 보니 집이야 많긴 하지만 다들 문이 꽝꽝 닫혀 있어 케이군이 거주할 곳이 없군요.크레이는 케이를 위해 집을 만들어 주기로 했습니다.케이 마음에 들지는 모르겠지만요.. 더보기 바빌론JS - 내 진짜 정체를 알려주지. 지난 시간 카메라 주도권 쟁탈전을 벌이던 NPC군은 자신의 이름을 밝혔는데요.https://itadventure.tistory.com/698 바빌론JS - NPC, 내 이름은 케이!지난 시간 엄청난 기술들을 선보이며 1위 자리를 다시 탈환한 미니 자동차,https://itadventure.tistory.com/697 바빌론JS - 미니자동차의 마을 탐방지난 시간에는 마을을 돌아다니는 NPC가 주인공이었지만itadventure.tistory.com그게 전부가 아니라 자신에게는 엄청난 비밀이 있다고 합니다.출생의 비밀일까요? :)소스 정리NPC 케이군의 정체를 밝히기 전에 소스를 정리하고 들어가겠습니다.일부 변수를 전역변수로, 그리고 기능들을 대부분 함수화한 main.js 소스입니다.main.js 를 아래 .. 더보기 바빌론JS - NPC, 내 이름은 케이! 지난 시간 엄청난 기술들을 선보이며 1위 자리를 다시 탈환한 미니 자동차,https://itadventure.tistory.com/697 바빌론JS - 미니자동차의 마을 탐방지난 시간에는 마을을 돌아다니는 NPC가 주인공이었지만,https://itadventure.tistory.com/696 바빌론JS - 경로 우대? 경로 따라 걷는 NPC지난 시간에는 한자리를 빙글 빙글 돌며 걷는 NPC를 만들었는데요.움itadventure.tistory.com우리의 NPC군도 가만 있을순 없다고 하네요. 그러면서 본인의 이름을 밝히는데요..본 게시글은 바빌론 공식 튜토리얼로 시작했다가 점점 안드로메다로 가는 크레이의 입맛에 맞는 게시글입니다 :)관심받고 싶은 NPC미니자동차의 활약에 NPC군, 카메라의 주도권을 본인.. 더보기 이전 1 2 3 4 ··· 9 다음
