자바스크립트와 캔버스77 바빌론JS - 한줄의 코드, VR세상으로 다이브! 바빌론JS에서 아주 멋진 기능을 발견하고 감탄을 하며, 기술 공유 드립니다 :)그것은 바로 기존의 코드에 단 한줄만 추가하면,VR 기기에서 3D 세상을 볼 수 있다는 것인데요. ( https URL 제약이 있습니다. )저렴한 스마트폰 VR ( 요즘 10,000 ~ 30,000원대 ) 이 있어 시도해 보았습니다.뭐 구글 카드보드 같은 기기예요.비싼 VR 기기가 아니라 사용법은 다소 불편하긴 한데요.스마트폰에서 웹브라우저를 실행하여 웹페이지를 띄운 다음,우측 하단의 안경 아이콘을 클릭하면 됩니다.권한을 묻는 창이 한번 나오는데요. ( 한번만 등장 후 그 후로 영영 안떠서 캡쳐를 못했네요.. )허용하면 아래와 같이 화면이 2개로 나뉩니다.이렇게 화면이 나뉜 스마트폰을 스마트폰 VR 기기에 넣고 동그란 입구 2.. 2025. 1. 6. 바빌론JS - 3D 한글 텍스트 지난 시간에는 여러 영상을 3차원 공간에 동시 재생하는 부분을 살펴보았습니다.https://itadventure.tistory.com/715 바빌론JS - 비디오 화면 여러개지난 360 영상 배경에 이어,https://itadventure.tistory.com/714 바빌론js - 360 영상 배경지난 그라운드 배경에 이어서,https://itadventure.tistory.com/713 바빌론JS - 그라운드 배경지난 게시글에서는 HDRI를 큐브맵itadventure.tistory.com오늘은 새로 알아낸 3D 공간에서의 한글 폰트 적용 방법을 살펴볼텐데요.결과물을 먼저 보시려면 아래 준비된 웹사이트를 확인해 주세요.그냥 글자만 표시하면 밋밋해서 글자가 뺑글뺑글 회전하는 부분도 넣었습니다.http://.. 2025. 1. 4. 바빌론JS - 비디오 화면 여러개 지난 360 영상 배경에 이어,https://itadventure.tistory.com/714 바빌론js - 360 영상 배경지난 그라운드 배경에 이어서,https://itadventure.tistory.com/713 바빌론JS - 그라운드 배경지난 게시글에서는 HDRI를 큐브맵으로 전환, 가상공간 배경으로 활용해보았는데요.https://itadventure.tistory.com/712 Citadventure.tistory.com2025 신년도 맞이한 김에 알아낸 기술을 하나 선보이겠습니다 :)바로 여러개의 영상 화면을 재생하는 것인데요.우선 결과물은 구현해 놓은 아래 크레이의 웹사이트를 참조하시구요.http://dreamplan7.cafe24.com/babylon/ex27/index2.html이런 여러.. 2025. 1. 2. 바빌론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/ ) 에서 가까스로 몇개 구할수 있었습니다.둘러보신 후 마음에 드시는 영상읋 다운로드하시면 됩니다.소스 코드 .. 2024. 9. 19. 바빌론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.. 2024. 9. 18. 바빌론JS - 배경 만들기 / HDRI => CUBEMAP HDRI 텍스쳐는 가상공간에서 360도 전 방향의 배경을 표현하는 텍스쳐인데요.3차원 공간 배경으로 자주 활용됩니다.바빌론 JS에서 바로 hdri 배경을 사용하는 방법이 있긴 하나 워낙 속도가 느리더라구요.그래서 CUBEMAP 으로 변환해 사용하는게 속도가 나고 좋은데요. 오늘은 해당 부분을 공유드리겠습니다.멋진 360 배경텍스쳐 다운로드PolyHaven 사이트 ( https://polyhaven.com/hdris ) 에는 엄청난 퀄리티의 360 배경HDRI 파일이 많이 있는데요.기본 영어이지만 우측 상단 국가를 선택, 한국어를 선택하면 보기 편합니다.마음에 드는 배경을 선택하여 3D 버튼을 선택하면,3차원 공간을 마우스로 드래그하여 미리 둘러볼 수 있습니다.정말로 마음에 들면 '다운로드' 버튼을 눌러 .. 2024. 9. 16. 바빌론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.. 2024. 9. 9. 바빌론JS - 블랜더에서 만든거 불러오며 뒤집힘 문제 해결 지난 게시글에서는 바빌론JS 의 중력에 대해 알아보았는데요.https://itadventure.tistory.com/709 바빌론JS - 중력과 컬리젼바빌론JS의 컬리젼(Collision)에 대해 알아보았는데요.바빌론JS에서 중력과 같은 것을 가능하게 하는 것입니다.근데 이 컬리젼을 적용하려면 그동안 작업했던 것들을 포기하고 거의 새로 만들어야itadventure.tistory.com블렌더3D에서 제작한 모델 파일도 이렇게 순순히 잘 되면 좋으련만 그게 한번에 쉽게 안되는데요.해외 게시글을 찾아보니 오른손/왼손 좌표계 차이 문제라고도, 바빌론JS의 버그 때문일거라고도 하더군요.그래서 최소한의 간단한 해결책을 알아냈습니다 :)블렌더로 준비한 그라운드 평범한 바닥 대신 블랜더로 아래와 같이 바닥을 모델링하였.. 2024. 9. 3. 바빌론JS - 중력과 컬리젼 바빌론JS의 컬리젼(Collision)에 대해 알아보았는데요.바빌론JS에서 중력과 같은 것을 가능하게 하는 것입니다.근데 이 컬리젼을 적용하려면 그동안 작업했던 것들을 포기하고 거의 새로 만들어야 하다시피 하지 않겠습니까?하지만 그만큼 매력적이기도 하기에 케이군과 함께 새로 시작해보았습니다 :)지난 게시글 : https://itadventure.tistory.com/703 바빌론JS - 모바일웹에서 캐릭터 이동지난 시간 비를 피하던 케이군이 드디어 집을 얻었습니다.https://itadventure.tistory.com/701 바빌론JS - 비를 피하고 싶어!지난 시간에는 케이군의 진짜 정체를 알아보았습니다.https://itadventure.tistory.com/itadventure.tistory.co.. 2024. 9. 3. 바빌론JS - 타입 스크립트 + 웹팩 바빌론JS는 비주얼 스튜디오에서 타입 스크립트(Type Script)로 개발할 수 있다 해서 접해보니 와우~ 자동 완성 기능이 장난 아니네요. 예전에 설치한 코드 스니펫은 상대도 안됩니다.다만 타입스크립트 사용법을 약간 익혀야 하는데요.오늘은 그 부분을 다뤄보겠습니다.설치부터 해야 해타입 스크립트는 웹에서 바로 작동하지 않습니다. 컴파일이란걸 해야 하는데요.순서가 이렇게 됩니다.1) PC에서 타입스크립트(.ts)로 개발2) PC에서 컴파일3) html 과 컴파일된 자바스크립트 (.js) 파일을 서버에 업로드그러다보니 윈도우에 컴파일러인 node.js 를 설치해야 하는데요.아래 '진진이랑'님 게시글에 설치방법이 잘 나와 있으니 참조해 주세요 :)https://jin2rang.tistory.com/entry.. 2024. 8. 3. 바빌론JS - 모바일웹에서 캐릭터 이동 지난 시간 비를 피하던 케이군이 드디어 집을 얻었습니다.https://itadventure.tistory.com/701 바빌론JS - 비를 피하고 싶어!지난 시간에는 케이군의 진짜 정체를 알아보았습니다.https://itadventure.tistory.com/699 바빌론JS - 내 진짜 정체를 알려주지.지난 시간 카메라 주도권 쟁탈전을 벌이던 NPC군은 자신의 이름을 밝혔는데itadventure.tistory.com아쉬운 것은 모바일웹에서는 오류가 뜨는 문제가 있어 모바일웹 사용자분들에게는 실망감(?)을 안겨드렸는데요.(너는 나에게 실망감을 안겨 주었고~)신망감으로 바꿔드리는 시간을 가져 보겠습니다 :)오류의 원인은?개발자 도구(F12)에서 모바일 모드로 전환하면원인을 볼 수 있는데요.결론은 마우스 장.. 2024. 8. 1. 바빌론JS - GUI 에디터! 바빌론 JS 공식사이트에서 제공하는 GUI 에디터 페이지를 발견했습니다!https://gui.babylonjs.com/여기서 GUI 를 편집하고 다운받으면 바빌론js 자바스크립트 코드로 불러올수 있더군요.아주 간단히 예를 들자면 도구상자의 버튼을 클릭, 화면에 버튼을 띄운 다음에왼쪽창의 버튼 텍스트 요소를 선택오른쪽 창의 TEXTBLOCK 속성에서 'Click Me' 를 '나를 클릭하시오'로 변경그리고 저장하면 됩니다.그러면 파일이 다운로드되는데요.다운받은 파일을 main.js 와 같은 폴더에 넣고 파일명을 gui.json 으로 변경합니다.그리고 아래 코드를 이용하면 GUI 를 불러올 수 있습니다.const canvas = document.getElementById("renderCanvas");const.. 2024. 7. 31. 이전 1 2 3 4 ··· 7 다음
