바빌론js 썸네일형 리스트형 바빌론js - 360 영상 배경 지난 그라운드 배경에 이어서,https://itadventure.tistory.com/713 바빌론JS - 그라운드 배경지난 게시글에서는 HDRI를 큐브맵으로 전환, 가상공간 배경으로 활용해보았는데요.https://itadventure.tistory.com/712 CUBEMAP" data-og-description="HDRI 텍스쳐는 가상공간에서 360도 전 방향의 배경을 표현하는itadventure.tistory.com오늘은 360 영상을 재생하는 방법을 알아보겠습니다 :)360 영상을 다운로드360 무료 영상은 좀처럼 구하기 어려운데요.매틀 사이트 ( https://www.mettle.com/ ) 에서 가까스로 몇개 구할수 있었습니다.둘러보신 후 마음에 드시는 영상읋 다운로드하시면 됩니다.소스 코드 .. 더보기 바빌론JS - 그라운드 배경 지난 게시글에서는 HDRI를 큐브맵으로 전환, 가상공간 배경으로 활용해보았는데요.https://itadventure.tistory.com/712 CUBEMAP" data-og-description="HDRI 텍스쳐는 가상공간에서 360도 전 방향의 배경을 표현하는 텍스쳐인데요.3차원 공간 배경으로 자주 활용됩니다.바빌론 JS에서 바로 hdri 배경을 사용하는 방법이 있긴 하나 워낙 속도가 느리더" data-og-host="itadventure.tistory.com" data-og-source-url="https://itadventure.tistory.com/712" data-og-url="https://itadventure.tistory.com/712" data-og-image="https://scrap.. 더보기 바빌론JS - 배경 만들기 / HDRI => CUBEMAP HDRI 텍스쳐는 가상공간에서 360도 전 방향의 배경을 표현하는 텍스쳐인데요.3차원 공간 배경으로 자주 활용됩니다.바빌론 JS에서 바로 hdri 배경을 사용하는 방법이 있긴 하나 워낙 속도가 느리더라구요.그래서 CUBEMAP 으로 변환해 사용하는게 속도가 나고 좋은데요. 오늘은 해당 부분을 공유드리겠습니다.멋진 360 배경텍스쳐 다운로드PolyHaven 사이트 ( https://polyhaven.com/hdris ) 에는 엄청난 퀄리티의 360 배경HDRI 파일이 많이 있는데요.기본 영어이지만 우측 상단 국가를 선택, 한국어를 선택하면 보기 편합니다.마음에 드는 배경을 선택하여 3D 버튼을 선택하면,3차원 공간을 마우스로 드래그하여 미리 둘러볼 수 있습니다.정말로 마음에 들면 '다운로드' 버튼을 눌러 .. 더보기 바빌론JS - 플레이그라운드 내 사이트에서 그대로! 바빌론 JS의 플레이 그라운드에는 멋진 예제들이 많은데요.제공된 예제 소스들은 플레이 그라운드 내에서만 활용할수가 있습니다.아니, 그런줄만 알았었지요.예제 소스들 : https://www.babylonjs.com/featureDemos/ Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its BestBabylon.js is one of the world's leading WebGL-based graphics engines. From a new visual scene inspector, best-in-class physically-based rendering, countless performance optimizations, and much.. 더보기 바빌론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 - CDN 파일을 내 서버에 바빌론JS 에서는 프로덕트 ( 상용서비스) 환경에서 자기네 CDN 서버를 사용하지 말라고 하는데요.그 이유는 파일이 갑자기 변경될 수도 있고 CDN 서버 요금 발생 때문도 아닐까 생각됩니다 :)꼭 그 이유가 아니더라도 (그럴것 같진 않지만) 갑자기 바빌론JS 공식 사이트가 없어진다면 아마도 그쪽에 의존하는 모든 프로젝트는 올 스톱될테니 모든 CDN 파일은 안전하고 내 서버에 저장하여 서비스하는게 안전합니다.아래 페이지에 접속하시면 바빌론JS의 버전별 파일들을 보실수 있습니다.https://github.com/BabylonJS/Babylon.js/releases바빌론JS의 최신버전은 7.20.1 버전인데요 ( 2024. 8. 11일 기준 )다 만들어진 최적화 세팅 파일은 cdnSnapshot.zip 파일입.. 더보기 바빌론JS - GUI 에디터! 바빌론 JS 공식사이트에서 제공하는 GUI 에디터 페이지를 발견했습니다!https://gui.babylonjs.com/여기서 GUI 를 편집하고 다운받으면 바빌론js 자바스크립트 코드로 불러올수 있더군요.아주 간단히 예를 들자면 도구상자의 버튼을 클릭, 화면에 버튼을 띄운 다음에왼쪽창의 버튼 텍스트 요소를 선택오른쪽 창의 TEXTBLOCK 속성에서 'Click Me' 를 '나를 클릭하시오'로 변경그리고 저장하면 됩니다.그러면 파일이 다운로드되는데요.다운받은 파일을 main.js 와 같은 폴더에 넣고 파일명을 gui.json 으로 변경합니다.그리고 아래 코드를 이용하면 GUI 를 불러올 수 있습니다.const canvas = document.getElementById("renderCanvas");const.. 더보기 이전 1 2 3 다음
