자바스크립트와 캔버스77 바빌론JS - 비를 피하고 싶어! 지난 시간에는 케이군의 진짜 정체를 알아보았습니다.https://itadventure.tistory.com/699 바빌론JS - 내 진짜 정체를 알려주지.지난 시간 카메라 주도권 쟁탈전을 벌이던 NPC군은 자신의 이름을 밝혔는데요.https://itadventure.tistory.com/698 바빌론JS - NPC, 내 이름은 케이!지난 시간 엄청난 기술들을 선보이며 1위 자리를 다시 탈itadventure.tistory.com케이군은 계속되는 비에 이제는 몸이 추워 으슬으슬하다고 하는군요.그러면서 몸을 피할 곳이 있으면 좋겠다고 합니다.그러고 보니 집이야 많긴 하지만 다들 문이 꽝꽝 닫혀 있어 케이군이 거주할 곳이 없군요.크레이는 케이를 위해 집을 만들어 주기로 했습니다.케이 마음에 들지는 모르겠지만요.. 2024. 7. 29. 바빌론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 를 아래 .. 2024. 7. 26. 바빌론JS - NPC, 내 이름은 케이! 지난 시간 엄청난 기술들을 선보이며 1위 자리를 다시 탈환한 미니 자동차,https://itadventure.tistory.com/697 바빌론JS - 미니자동차의 마을 탐방지난 시간에는 마을을 돌아다니는 NPC가 주인공이었지만,https://itadventure.tistory.com/696 바빌론JS - 경로 우대? 경로 따라 걷는 NPC지난 시간에는 한자리를 빙글 빙글 돌며 걷는 NPC를 만들었는데요.움itadventure.tistory.com우리의 NPC군도 가만 있을순 없다고 하네요. 그러면서 본인의 이름을 밝히는데요..본 게시글은 바빌론 공식 튜토리얼로 시작했다가 점점 안드로메다로 가는 크레이의 입맛에 맞는 게시글입니다 :)관심받고 싶은 NPC미니자동차의 활약에 NPC군, 카메라의 주도권을 본인.. 2024. 7. 25. 바빌론JS - 미니자동차의 마을 탐방 지난 시간에는 마을을 돌아다니는 NPC가 주인공이었지만,https://itadventure.tistory.com/696 바빌론JS - 경로 우대? 경로 따라 걷는 NPC지난 시간에는 한자리를 빙글 빙글 돌며 걷는 NPC를 만들었는데요.움직임이 좀 단순하지요?https://itadventure.tistory.com/695 바빌론JS - 이동하는 NPC지난 시간에는 마을을 달리는 미니 자동차에 대해itadventure.tistory.com미니자동차도 질세라 더 재미있는 것으로 인기를 찾겠다고 하네요.어디 한번 구경해볼까요? :)미니 자동차 다시 준비 미니 자동차도 직진만 하는 동작에 식상했는지 코스를 돌고 싶다고 합니다.코스를 도는 시스템은 앞방향 이동이라는 동작이 필요한데요.__root__ 라는 녀석을 불.. 2024. 7. 22. 바빌론JS - 경로 우대? 경로 따라 걷는 NPC 지난 시간에는 한자리를 빙글 빙글 돌며 걷는 NPC를 만들었는데요.움직임이 좀 단순하지요?https://itadventure.tistory.com/695 바빌론JS - 이동하는 NPC지난 시간에는 마을을 달리는 미니 자동차에 대해 다뤄보았습니다.https://itadventure.tistory.com/693 미니자동차 마을을 달리다이번 시간에는 지난 시간에 이어 https://itadventure.tistory.com/692 바빌론JS -itadventure.tistory.com이번 시간에는 경로를 따라 걷는 NPC를 다뤄보겠습니다.튜토리얼을 참고하긴 했지만 세컨드라이프에서 익혔던 크레이 나름의 기술을 활용하였습니다.레이저를 쏴라! ( 좌표 조사 )경로란 캐릭터가 이동하는 길을 의미하는데요. ( 아래 파.. 2024. 7. 21. 바빌론JS - 이동하는 NPC 지난 시간에는 마을을 달리는 미니 자동차에 대해 다뤄보았습니다.https://itadventure.tistory.com/693 미니자동차 마을을 달리다이번 시간에는 지난 시간에 이어 https://itadventure.tistory.com/692 바빌론JS - 때깔나는 미니자동차, 달려봐지난 시간에는 미니자동차 외형을 구성하는 모델을 만들었는데요.https://itadventure.tistory.com/6itadventure.tistory.com한방향으로만 달리는 자동차라니 좀 심심한 것 같아 이동하는 NPC 를 추가하겠습니다 :)이 컨텐츠는 공식 튜토리얼의 내용을 소화하여 크레이 입맛에 맞게 재구성하였습니다.캐릭터 준비!바빌론 공식 튜토리얼에 기본 제공 NPC가 있긴 한데요.직접 캐릭터와 걷기 애니메이.. 2024. 7. 21. 바빌론JS - 때깔나는 미니자동차, 달려봐 지난 시간에는 미니자동차 외형을 구성하는 모델을 만들었는데요.https://itadventure.tistory.com/691 바빌론JS - 미니자동차어릴적 장난감 자동차를 붕붕 소리내어 가지고 놀아보신 적이 있나요?적어도 필자의 어릴적 기억으로는 큰 장난감 자동차를 가진 친구를 어느정도 부러워 했던것 같습니다.추억을 회상하며 가itadventure.tistory.com그다지 모양이 나지 않아 에이~ 이게 뭐야 하신 분들도 계실겁니다.그랬던 미니 자동차가 오늘 새롭게 탄생합니다!바로 무늬빨을 입고 말이지요 :)이 내용은 공식 튜토리얼의 내용을 소화하여 크레이 나름대로 재구성한 것입니다.텍스쳐의 힘!3D 그래픽은 모델에 입히는 텍스쳐에 따라 느낌이 상당히 달라지는데요.미니자동차에 텍스쳐를 입혀 갖고 싶은 장.. 2024. 7. 17. 바빌론JS - 미니자동차 어릴적 장난감 자동차를 붕붕 소리내어 가지고 놀아보신 적이 있나요?적어도 필자의 어릴적 기억으로는 큰 장난감 자동차를 가진 친구를 어느정도 부러워 했던것 같습니다.추억을 회상하며 가상 공간에서 만들어보는 장난감 자동차의 세계로 떠나볼까요? :)이 게시글은 공식 튜토리얼을 소화하여 크레이의 입맛에 맞게 재구성하였습니다.지난 게시글에서는 마을을 저장하고 불러오는 부분을 진행했었는데요.이번 시간에는 그 연속이긴 하나 당장은 마을을 불러오지는 않을 겁니다.https://itadventure.tistory.com/690 바빌론JS - 마을 저장 & 열기지난 시간에는 멋진 마을을 꾸며 보았습니다.https://itadventure.tistory.com/689 바빌론JS - 마을 꾸미기지난 게시글에는 집을 만들고 표.. 2024. 7. 16. 바빌론JS - 마을 저장 & 열기 지난 시간에는 멋진 마을을 꾸며 보았습니다.https://itadventure.tistory.com/689 바빌론JS - 마을 꾸미기지난 게시글에는 집을 만들고 표면을 꾸며보았지요.https://itadventure.tistory.com/688 바빌론 JS - 집의 벽 표면 지대로.지난 게시글에서는 집을 만들어 보았었는데요.https://itadventure.tistory.com/687 바빌itadventure.tistory.com그런데 소스량이 만만치가 않습니다.이렇게 만든 마을을 장면 파일로 저장하면 관리하기 편리한데요..glb 장면 파일로 저장하는 법을 알아보고 파일을 불러오는 부분도 다뤄보겠습니다.장면 저장 cdn 설정사실 지난 게시글에 장면을 저장하는 부분을 다뤄보았습니다.https://itad.. 2024. 7. 15. 바빌론JS 를 vscode 에서 쉽게 - 코드스니펫 목록 비주얼 스튜디오에서 바빌론JS의 플레이 그라운드처럼 코드 자동 완성 기능이 있으면 좋을텐데..생각해 보셨나요? 있더라구요 :)바빌론JS 코드 익스텐션 설치비주얼 스튜디오의 extension 확장 프로그램에서 babylon 을 검색하시면 babylon.js Snippet 이 나오는데요.이걸 설치해 주시면 됩니다.바빌론JS 기본소스 자동 완성바빌론JS 의 익스텐션 기능은 확장자 .js 와 .ts 파일에서만 작동하기 때문에,HTML 파일과 JS 파일, 각 1개씩 생성해 주어야 하는데요.HTML 페이지를 생성하여 오픈한 다음,Ctrl + Space 키를 누르면 코드 스니펫 목록이 나옵니다.HTML scene 이 바빌론JS 기본 소스이므로 선택하면,아래와 같이 HTML 소스가 완성됩니다./main.js 를 스크.. 2024. 7. 12. 바빌론JS - 웹개발 기본형 지난 게시글 장면 처리편에 이어서 오늘은 웹 개발 기본형에 대해 다뤄보겠습니다.https://itadventure.tistory.com/684 바빌론JS - 장면에서 모델 불러오기지난 시간에는 장면을 생성하고 이를 뷰어에서 불러오는 방법을 살펴보았습니다.https://itadventure.tistory.com/683 바빌론JS - 장면 만들고 뷰어로 불러오기지난 게시글에 바빌론JS를 이용하여 재미난itadventure.tistory.com 플레이 그라운드는 편리하긴 하지만, 가끔 접속이 안되기도 하고 무엇보다 서버와의 실시간 인터렉션에는 한계가 있습니다.아마도 대부분의 웹 개발자분은 플레이 그라운드가 아닌 백앤드 서버와 통신이 가능한 자신만의 웹환경에서 바로바로 소스를 수정해가며 개발을 원하실 수 있는데.. 2024. 7. 11. 바빌론JS - 장면 만들고 뷰어로 불러오기 지난 게시글에 바빌론JS를 이용하여 재미난걸 만들어보았었는데요.https://itadventure.tistory.com/680 바빌론js - 3차원 웹!평소 취미 활동대로 이것 저것 다양한 코드의 바다를 순항하던 중 아주 흥미로운 걸 발견했습니다.바로 babylon JS(바빌론JS) 라는건데요.얼마전 다루었던 Three.js와 비슷한 라이브러리로서 웹(Web)에itadventure.tistory.com원리를 모르고 진행했기 때문에 신기하긴 했지만 어떻게 그런건지 이해가 어려울 수 있습니다.오늘은 그 원리를 하나씩 밝혀 보고자 합니다 :)기초코드가장 기본적인 코드는 아래와 같습니다.scene 와 camera 는 필수로 제공되어야 하는데요scene 은 가상공간을, camera 는 카메라를 의미합니다. 상세 .. 2024. 7. 9. 이전 1 2 3 4 5 ··· 7 다음
