바빌론js27 바빌론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. 미니자동차 마을을 달리다 이번 시간에는 지난 시간에 이어 https://itadventure.tistory.com/692 바빌론JS - 때깔나는 미니자동차, 달려봐지난 시간에는 미니자동차 외형을 구성하는 모델을 만들었는데요.https://itadventure.tistory.com/691 바빌론JS - 미니자동차어릴적 장난감 자동차를 붕붕 소리내어 가지고 놀아보신 적이 있나요?적어도itadventure.tistory.com미니자동차가 실제 움직이는 연출을 하겠습니다.본 가이드는 공식 튜토리얼의 내용을 소화하여 크레이 입맛에 맞게 재구성하였습니다.미니 자동차 저장계속 공회전하는 자동자의 바퀴, 웬지 에너지가 아깝다는 생각이 들어이제는 자동차가 앞으로 직진하는 장면을 연출해볼텐데요.그 전에 자동차를 마을을 저장한 것처럼 gld 파일로.. 2024. 7. 19. 바빌론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 - 마을 꾸미기 지난 게시글에는 집을 만들고 표면을 꾸며보았지요.https://itadventure.tistory.com/688 바빌론 JS - 집의 벽 표면 지대로.지난 게시글에서는 집을 만들어 보았었는데요.https://itadventure.tistory.com/687 바빌론JS - 땅위에 집 만들기 ( 자바스크립트로 )오늘은 공식 튜토리얼의 집 짓기(영문)편을 크레이가 소화한 내용을 재itadventure.tistory.com이번 시간에는 만들어진 집을 이용하여 마을을 꾸며보겠습니다.박스와 지붕 합치기다양한 위치에 집을 배치하려면 박스과 지붕을 합쳐놓는 것이 좋습니다.그래서 하나의 house 라는 모델을 다루는 것이 편리한데요.두개의 모델을 합치는 명령은 BABYLON.Mesh.MergeMeshes 입니다.지난번 .. 2024. 7. 14. 바빌론 JS - 집의 벽 표면 지대로. 지난 게시글에서는 집을 만들어 보았었는데요.https://itadventure.tistory.com/687 바빌론JS - 땅위에 집 만들기 ( 자바스크립트로 )오늘은 공식 튜토리얼의 집 짓기(영문)편을 크레이가 소화한 내용을 재구성한 집 만들기편을 진행하겠습니다.비주얼 스튜디오 코드로 진행할텐데요. 지난 게시글의 아래 코드를 참조해 주세요.itadventure.tistory.com벽면을 보면 뭔가 이상한게 있습니다.벽돌의 방향이 한쪽 면은 가로 방향으로 맞게 보이는데,다른 면은 방향이 세로인걸 볼 수 있는데요.이 문제를 해결하려면 faceUV를 사용해야 합니다.우선 아래와 같이 코드를 변경하는 것만으로 위 문제는 해결됩니다.const faceUV = [];var box = BABYLON.MeshBuild.. 2024. 7. 13. 바빌론JS - 땅위에 집 만들기 ( 자바스크립트로 ) 오늘은 공식 튜토리얼의 집 짓기(영문)편을 크레이가 소화한 내용을 재구성한 집 만들기편을 진행하겠습니다.비주얼 스튜디오 코드로 진행할텐데요. 지난 게시글의 아래 코드를 참조해 주세요.지난 게시글 : https://itadventure.tistory.com/686 바빌론JS 를 vscode 에서 쉽게 - 코드스니펫 목록비주얼 스튜디오에서 바빌론JS의 플레이 그라운드처럼 코드 자동 완성 기능이 있으면 좋을텐데..생각해 보셨나요? 있더라구요 :)바빌론JS 코드 익스텐션 설치비주얼 스튜디오의 extension 확장 프itadventure.tistory.com가상공간에 그림같은 집을 짓고 거기서 걱정없이 살 수 있다면 좋겠지만,세상은 그렇게 우리를 여유롭게 내버려 두지는 않지요 :)그냥 상상의 나래를 펼쳐 잠깐 .. 2024. 7. 13. 바빌론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. 이전 1 2 3 다음
