babylon.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 - CDN 파일을 내 서버에 바빌론JS 에서는 프로덕트 ( 상용서비스) 환경에서 자기네 CDN 서버를 사용하지 말라고 하는데요.그 이유는 파일이 갑자기 변경될 수도 있고 CDN 서버 요금 발생 때문도 아닐까 생각됩니다 :)꼭 그 이유가 아니더라도 (그럴것 같진 않지만) 갑자기 바빌론JS 공식 사이트가 없어진다면 아마도 그쪽에 의존하는 모든 프로젝트는 올 스톱될테니 모든 CDN 파일은 안전하고 내 서버에 저장하여 서비스하는게 안전합니다.아래 페이지에 접속하시면 바빌론JS의 버전별 파일들을 보실수 있습니다.https://github.com/BabylonJS/Babylon.js/releases바빌론JS의 최신버전은 7.20.1 버전인데요 ( 2024. 8. 11일 기준 )다 만들어진 최적화 세팅 파일은 cdnSnapshot.zip 파일입.. 더보기 바빌론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)에서 모바일 모드로 전환하면원인을 볼 수 있는데요.결론은 마우스 장.. 더보기 이전 1 2 3 다음
