바빌론js 썸네일형 리스트형 바빌론JS - 마을 꾸미기 지난 게시글에는 집을 만들고 표면을 꾸며보았지요.https://itadventure.tistory.com/688 바빌론 JS - 집의 벽 표면 지대로.지난 게시글에서는 집을 만들어 보았었는데요.https://itadventure.tistory.com/687 바빌론JS - 땅위에 집 만들기 ( 자바스크립트로 )오늘은 공식 튜토리얼의 집 짓기(영문)편을 크레이가 소화한 내용을 재itadventure.tistory.com이번 시간에는 만들어진 집을 이용하여 마을을 꾸며보겠습니다.박스와 지붕 합치기다양한 위치에 집을 배치하려면 박스과 지붕을 합쳐놓는 것이 좋습니다.그래서 하나의 house 라는 모델을 다루는 것이 편리한데요.두개의 모델을 합치는 명령은 BABYLON.Mesh.MergeMeshes 입니다.지난번 .. 더보기 바빌론 JS - 집의 벽 표면 지대로. 지난 게시글에서는 집을 만들어 보았었는데요.https://itadventure.tistory.com/687 바빌론JS - 땅위에 집 만들기 ( 자바스크립트로 )오늘은 공식 튜토리얼의 집 짓기(영문)편을 크레이가 소화한 내용을 재구성한 집 만들기편을 진행하겠습니다.비주얼 스튜디오 코드로 진행할텐데요. 지난 게시글의 아래 코드를 참조해 주세요.itadventure.tistory.com벽면을 보면 뭔가 이상한게 있습니다.벽돌의 방향이 한쪽 면은 가로 방향으로 맞게 보이는데,다른 면은 방향이 세로인걸 볼 수 있는데요.이 문제를 해결하려면 faceUV를 사용해야 합니다.우선 아래와 같이 코드를 변경하는 것만으로 위 문제는 해결됩니다.const faceUV = [];var box = BABYLON.MeshBuild.. 더보기 바빌론JS - 땅위에 집 만들기 ( 자바스크립트로 ) 오늘은 공식 튜토리얼의 집 짓기(영문)편을 크레이가 소화한 내용을 재구성한 집 만들기편을 진행하겠습니다.비주얼 스튜디오 코드로 진행할텐데요. 지난 게시글의 아래 코드를 참조해 주세요.지난 게시글 : https://itadventure.tistory.com/686 바빌론JS 를 vscode 에서 쉽게 - 코드스니펫 목록비주얼 스튜디오에서 바빌론JS의 플레이 그라운드처럼 코드 자동 완성 기능이 있으면 좋을텐데..생각해 보셨나요? 있더라구요 :)바빌론JS 코드 익스텐션 설치비주얼 스튜디오의 extension 확장 프itadventure.tistory.com가상공간에 그림같은 집을 짓고 거기서 걱정없이 살 수 있다면 좋겠지만,세상은 그렇게 우리를 여유롭게 내버려 두지는 않지요 :)그냥 상상의 나래를 펼쳐 잠깐 .. 더보기 바빌론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 를 스크.. 더보기 바빌론JS - 웹개발 기본형 지난 게시글 장면 처리편에 이어서 오늘은 웹 개발 기본형에 대해 다뤄보겠습니다.https://itadventure.tistory.com/684 바빌론JS - 장면에서 모델 불러오기지난 시간에는 장면을 생성하고 이를 뷰어에서 불러오는 방법을 살펴보았습니다.https://itadventure.tistory.com/683 바빌론JS - 장면 만들고 뷰어로 불러오기지난 게시글에 바빌론JS를 이용하여 재미난itadventure.tistory.com 플레이 그라운드는 편리하긴 하지만, 가끔 접속이 안되기도 하고 무엇보다 서버와의 실시간 인터렉션에는 한계가 있습니다.아마도 대부분의 웹 개발자분은 플레이 그라운드가 아닌 백앤드 서버와 통신이 가능한 자신만의 웹환경에서 바로바로 소스를 수정해가며 개발을 원하실 수 있는데.. 더보기 바빌론JS - 장면에서 모델 불러오기 지난 시간에는 장면을 생성하고 이를 뷰어에서 불러오는 방법을 살펴보았습니다.https://itadventure.tistory.com/683 바빌론JS - 장면 만들고 뷰어로 불러오기지난 게시글에 바빌론JS를 이용하여 재미난걸 만들어보았었는데요.https://itadventure.tistory.com/680 바빌론js - 3차원 웹!평소 취미 활동대로 이것 저것 다양한 코드의 바다를 순항하던 중 아주 흥미로itadventure.tistory.com하지만 플레이 그라운드에는 장면 파일을 업로드하는 기능이 없습니다.그래서 이번에는 플레이 그라운드에서 제공하는 기본 장면 컨텐츠를 가지고 놀아보는 시간을 가져 보겠습니다.집 2채 장면 ( both houses scene ) 소개바빌론JS에는 초보자를 위한 연습용 .. 더보기 바빌론JS - 장면 만들고 뷰어로 불러오기 지난 게시글에 바빌론JS를 이용하여 재미난걸 만들어보았었는데요.https://itadventure.tistory.com/680 바빌론js - 3차원 웹!평소 취미 활동대로 이것 저것 다양한 코드의 바다를 순항하던 중 아주 흥미로운 걸 발견했습니다.바로 babylon JS(바빌론JS) 라는건데요.얼마전 다루었던 Three.js와 비슷한 라이브러리로서 웹(Web)에itadventure.tistory.com원리를 모르고 진행했기 때문에 신기하긴 했지만 어떻게 그런건지 이해가 어려울 수 있습니다.오늘은 그 원리를 하나씩 밝혀 보고자 합니다 :)기초코드가장 기본적인 코드는 아래와 같습니다.scene 와 camera 는 필수로 제공되어야 하는데요scene 은 가상공간을, camera 는 카메라를 의미합니다. 상세 .. 더보기 바빌론js - 3차원 웹! 평소 취미 활동대로 이것 저것 다양한 코드의 바다를 순항하던 중 아주 흥미로운 걸 발견했습니다.바로 babylon JS(바빌론JS) 라는건데요.얼마전 다루었던 Three.js와 비슷한 라이브러리로서 웹(Web)에서 3차원 그래픽을 다루는 자바스크립트입니다. 도입부를 시도해보니 어라? 잠깐 투자한 시간 대비 멋진 결과물을 보여줄 수 있어 나름 만족스럽네요.오늘은 해당 부분을 공유드리고자 합니다.본 내용은 공식 문서의 튜토리얼 내용을 소화하여 크레이 나름대로 재작성하였습니다.https://doc.babylonjs.com/journey/theFirstStep플레이 그라운드! 놀이터로 가볼까?바빌론JS는 실시간으로 코드를 작성, 결과를 볼 수 있는 3차원 플레이 그라운드(PlayGround)를 제공합니다.일종의.. 더보기 이전 1 2 3 다음
