크레이의 IT탐구

크레이의 최신컨텐츠입니다.

• 바빌론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.. 더보기
• Blender 4 꿀팁. 메뉴글자 키우기 최근 바빌론JS에 사용할 모델을 만들기 위해 블렌더3D를 다시 연습하던 중 알아낸 꿀팁, 공유합니다 :)블렌더4 버전에서 확인한 내용입니다.블랜더 화면 글씨는 여타 프로그램에 비해 작은 편인데요.기본 테마도 검정색이다보니 메뉴 찾기가 여간 불편한게 아닙니다.그런데!글자 크기를 키울수 있는 방법이 있어서 공유드립니다.바로 Resoultion Scale 이라는 옵션인데요. ( 기본값 1.0 )환경설정 화면에서 바꿀수 있습니다.단축키 Ctrl + 콤마(,) 를 누르고,(  단축키가 작동 안되면 Edit - Preferences 메뉴 )좌측 Interface 메뉴를 선택하면 Resolution Scale 항목을 찾아볼수 있습니다.기본값으로 1.0이 들어있을텐데요.이 값을 1.2든 1.5든 변경해주시면 됩니다.변.. 더보기
• 바빌론JS - CDN 파일을 내 서버에 바빌론JS 에서는 프로덕트 ( 상용서비스) 환경에서 자기네 CDN 서버를 사용하지 말라고 하는데요.그 이유는 파일이 갑자기 변경될 수도 있고 CDN 서버 요금 발생 때문도 아닐까 생각됩니다 :)꼭 그 이유가 아니더라도 (그럴것 같진 않지만) 갑자기 바빌론JS 공식 사이트가 없어진다면 아마도 그쪽에 의존하는 모든 프로젝트는 올 스톱될테니 모든 CDN 파일은 안전하고 내 서버에 저장하여 서비스하는게 안전합니다.아래 페이지에 접속하시면 바빌론JS의 버전별 파일들을 보실수 있습니다.https://github.com/BabylonJS/Babylon.js/releases바빌론JS의 최신버전은 7.20.1 버전인데요 ( 2024. 8. 11일 기준 )다 만들어진 최적화 세팅 파일은 cdnSnapshot.zip 파일입.. 더보기
• 교회 예배는 지루해? 노노~ [ 뉴젠워십 ] " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스불신자도 춤추게 만드는 천관웅 목사님의 뉴제너레이션 워십 최근 근황을 엿볼 수 있는 유튜브 영상입니다.예배는 축제라는 말씀과 딱 들어 맞네요. 한번 들여다 보실래요 ? :) 더보기
• 블렌더3D - 로우폴리 캐릭터 연습 2 블렌더로 로우 폴리 캐릭터 연습을 한번 더 해보았습니다.케이군 때보다는 좀 더 잘 만들려고 힘써봤네요 :)뼈대 심고 리깅필요하신 분은 자유롭게 다운받아 사용하세요 :)바빌론JS에 올려본 스샷 더보기
• 바빌론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)에서 모바일 모드로 전환하면원인을 볼 수 있는데요.결론은 마우스 장.. 더보기
• 바빌론JS - GUI 에디터! 바빌론 JS 공식사이트에서 제공하는 GUI 에디터 페이지를 발견했습니다!https://gui.babylonjs.com/여기서 GUI 를 편집하고 다운받으면 바빌론js 자바스크립트 코드로 불러올수 있더군요.아주 간단히 예를 들자면 도구상자의 버튼을 클릭, 화면에 버튼을 띄운 다음에왼쪽창의 버튼 텍스트 요소를 선택오른쪽 창의 TEXTBLOCK 속성에서 'Click Me' 를 '나를 클릭하시오'로 변경그리고 저장하면 됩니다.그러면 파일이 다운로드되는데요.다운받은 파일을 main.js 와 같은 폴더에 넣고 파일명을 gui.json 으로 변경합니다.그리고 아래 코드를 이용하면 GUI 를 불러올 수 있습니다.const canvas = document.getElementById("renderCanvas");const.. 더보기
• 바빌론JS - 비를 피하고 싶어! 지난 시간에는 케이군의 진짜 정체를 알아보았습니다.https://itadventure.tistory.com/699 바빌론JS - 내 진짜 정체를 알려주지.지난 시간 카메라 주도권 쟁탈전을 벌이던 NPC군은 자신의 이름을 밝혔는데요.https://itadventure.tistory.com/698 바빌론JS - NPC, 내 이름은 케이!지난 시간 엄청난 기술들을 선보이며 1위 자리를 다시 탈itadventure.tistory.com케이군은 계속되는 비에 이제는 몸이 추워 으슬으슬하다고 하는군요.그러면서 몸을 피할 곳이 있으면 좋겠다고 합니다.그러고 보니 집이야 많긴 하지만 다들 문이 꽝꽝 닫혀 있어 케이군이 거주할 곳이 없군요.크레이는 케이를 위해 집을 만들어 주기로 했습니다.케이 마음에 들지는 모르겠지만요.. 더보기
• 블랜더3D - 로우폴리 집 연습 유튜브 강좌를 통하여 로우 폴리 집 만들기를 연습해 보았습니다.각 부위마다 색상을 입혀보았는데 웬지 입히기 전이 더 뽀대나는 것 같네요 ㅎ하여튼 이걸로 바빌론js에서 잘 가지고 놀아봐야 겠습니다 :)위 모델이 필요하신 분은 자유롭게 다운받으세요 :) 더보기
• 바빌론JS - 내 진짜 정체를 알려주지. 지난 시간 카메라 주도권 쟁탈전을 벌이던 NPC군은 자신의 이름을 밝혔는데요.https://itadventure.tistory.com/698 바빌론JS - NPC, 내 이름은 케이!지난 시간 엄청난 기술들을 선보이며 1위 자리를 다시 탈환한 미니 자동차,https://itadventure.tistory.com/697 바빌론JS - 미니자동차의 마을 탐방지난 시간에는 마을을 돌아다니는 NPC가 주인공이었지만itadventure.tistory.com그게 전부가 아니라 자신에게는 엄청난 비밀이 있다고 합니다.출생의 비밀일까요? :)소스 정리NPC 케이군의 정체를 밝히기 전에 소스를 정리하고 들어가겠습니다.일부 변수를 전역변수로, 그리고 기능들을 대부분 함수화한 main.js 소스입니다.main.js 를 아래 .. 더보기
• 바빌론JS - NPC, 내 이름은 케이! 지난 시간 엄청난 기술들을 선보이며 1위 자리를 다시 탈환한 미니 자동차,https://itadventure.tistory.com/697 바빌론JS - 미니자동차의 마을 탐방지난 시간에는 마을을 돌아다니는 NPC가 주인공이었지만,https://itadventure.tistory.com/696 바빌론JS - 경로 우대? 경로 따라 걷는 NPC지난 시간에는 한자리를 빙글 빙글 돌며 걷는 NPC를 만들었는데요.움itadventure.tistory.com우리의 NPC군도 가만 있을순 없다고 하네요. 그러면서 본인의 이름을 밝히는데요..본 게시글은 바빌론 공식 튜토리얼로 시작했다가 점점 안드로메다로 가는 크레이의 입맛에 맞는 게시글입니다 :)관심받고 싶은 NPC미니자동차의 활약에 NPC군, 카메라의 주도권을 본인.. 더보기
• 바빌론JS - 미니자동차의 마을 탐방 지난 시간에는 마을을 돌아다니는 NPC가 주인공이었지만,https://itadventure.tistory.com/696 바빌론JS - 경로 우대? 경로 따라 걷는 NPC지난 시간에는 한자리를 빙글 빙글 돌며 걷는 NPC를 만들었는데요.움직임이 좀 단순하지요?https://itadventure.tistory.com/695 바빌론JS - 이동하는 NPC지난 시간에는 마을을 달리는 미니 자동차에 대해itadventure.tistory.com미니자동차도 질세라 더 재미있는 것으로 인기를 찾겠다고 하네요.어디 한번 구경해볼까요? :)미니 자동차 다시 준비 미니 자동차도 직진만 하는 동작에 식상했는지 코스를 돌고 싶다고 합니다.코스를 도는 시스템은 앞방향 이동이라는 동작이 필요한데요.__root__ 라는 녀석을 불.. 더보기
• 바빌론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를 다뤄보겠습니다.튜토리얼을 참고하긴 했지만 세컨드라이프에서 익혔던 크레이 나름의 기술을 활용하였습니다.레이저를 쏴라! ( 좌표 조사 )경로란 캐릭터가 이동하는 길을 의미하는데요. ( 아래 파.. 더보기
• 바빌론JS - 이동하는 NPC 지난 시간에는 마을을 달리는 미니 자동차에 대해 다뤄보았습니다.https://itadventure.tistory.com/693 미니자동차 마을을 달리다이번 시간에는 지난 시간에 이어 https://itadventure.tistory.com/692 바빌론JS - 때깔나는 미니자동차, 달려봐지난 시간에는 미니자동차 외형을 구성하는 모델을 만들었는데요.https://itadventure.tistory.com/6itadventure.tistory.com한방향으로만 달리는 자동차라니 좀 심심한 것 같아 이동하는 NPC 를 추가하겠습니다 :)이 컨텐츠는 공식 튜토리얼의 내용을 소화하여 크레이 입맛에 맞게 재구성하였습니다.캐릭터 준비!바빌론 공식 튜토리얼에 기본 제공 NPC가 있긴 한데요.직접 캐릭터와 걷기 애니메이.. 더보기
• 로우 폴리 만들어봄 ( 블랜더 ) 민규쌤님의 유튜브 강좌를 따라 블랜더로 로우 폴리를 만들어 봤습니다 :)https://www.youtube.com/watch?v=4ut9qOpPe2Q웬지 마음에 드네요 ㅎㅎ요새 학습하는 바빌론JS에서 자바스크립트 코드로 마을 광장에도 세워보았는데요. 괜찮네요 :)BABYLON.SceneLoader.ImportMeshAsync( "", "./", "character00.glb", scene).then((result) => { var mesh = result.meshes[0]; mesh.scaling = new BABYLON.Vector3(0.08, 0.08, 0.08); mesh.position.y = 0.5; mesh.rotate( BABYLON.Axis.Y.. 더보기
• 미니자동차 마을을 달리다 이번 시간에는 지난 시간에 이어 https://itadventure.tistory.com/692 바빌론JS - 때깔나는 미니자동차, 달려봐지난 시간에는 미니자동차 외형을 구성하는 모델을 만들었는데요.https://itadventure.tistory.com/691 바빌론JS - 미니자동차어릴적 장난감 자동차를 붕붕 소리내어 가지고 놀아보신 적이 있나요?적어도itadventure.tistory.com미니자동차가 실제 움직이는 연출을 하겠습니다.본 가이드는 공식 튜토리얼의 내용을 소화하여 크레이 입맛에 맞게 재구성하였습니다.미니 자동차 저장계속 공회전하는 자동자의 바퀴, 웬지 에너지가 아깝다는 생각이 들어이제는 자동차가 앞으로 직진하는 장면을 연출해볼텐데요.그 전에 자동차를 마을을 저장한 것처럼 gld 파일로.. 더보기
• 바빌론JS - 때깔나는 미니자동차, 달려봐 지난 시간에는 미니자동차 외형을 구성하는 모델을 만들었는데요.https://itadventure.tistory.com/691 바빌론JS - 미니자동차어릴적 장난감 자동차를 붕붕 소리내어 가지고 놀아보신 적이 있나요?적어도 필자의 어릴적 기억으로는 큰 장난감 자동차를 가진 친구를 어느정도 부러워 했던것 같습니다.추억을 회상하며 가itadventure.tistory.com그다지 모양이 나지 않아 에이~ 이게 뭐야 하신 분들도 계실겁니다.그랬던 미니 자동차가 오늘 새롭게 탄생합니다!바로 무늬빨을 입고 말이지요 :)이 내용은 공식 튜토리얼의 내용을 소화하여 크레이 나름대로 재구성한 것입니다.텍스쳐의 힘!3D 그래픽은 모델에 입히는 텍스쳐에 따라 느낌이 상당히 달라지는데요.미니자동차에 텍스쳐를 입혀 갖고 싶은 장.. 더보기
• 바빌론JS - 미니자동차 어릴적 장난감 자동차를 붕붕 소리내어 가지고 놀아보신 적이 있나요?적어도 필자의 어릴적 기억으로는 큰 장난감 자동차를 가진 친구를 어느정도 부러워 했던것 같습니다.추억을 회상하며 가상 공간에서 만들어보는 장난감 자동차의 세계로 떠나볼까요? :)이 게시글은 공식 튜토리얼을 소화하여 크레이의 입맛에 맞게 재구성하였습니다.지난 게시글에서는 마을을 저장하고 불러오는 부분을 진행했었는데요.이번 시간에는 그 연속이긴 하나 당장은 마을을 불러오지는 않을 겁니다.https://itadventure.tistory.com/690 바빌론JS - 마을 저장 & 열기지난 시간에는 멋진 마을을 꾸며 보았습니다.https://itadventure.tistory.com/689 바빌론JS - 마을 꾸미기지난 게시글에는 집을 만들고 표.. 더보기
• 바빌론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.. 더보기
• 바빌론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 는 카메라를 의미합니다. 상세 .. 더보기
• 블로그에 스케치팹 3D 장면 넣기 이제는 유튜브 뿐만 아니라 3D 장면도 블로그에 넣을 수 있는 시대가 왔습니다.스케치팹(Sketch Fab)이 바로 그러한데요.아래 평온하게 잠들어 있는 친구 도그(Dog)를 마우스로 이리 저리 잡고 움직이거나 돌려보거나마우스 휠을 확대해 보세요. 스마트폰이라면 두손가락으로 확대/축소/이동해보세요. 여지껏 본적이 없으셨다면 신세계이실 겁니다 :) Dog by sv.stats on Sketchfab스케치팹의 이러한 장면은 마치 유튜브처럼 블로그 본문에 넣을 수 있는데요.티스토리 기준으로 설명드리겠습니다.거두절미하고 바로 시작해 보죠, 스케치팹으로 이동!https://sketchfab.com/화면 위 검색창에 영어로 검색하시거나딱히 단어가 떠오르지 않으면 Explore 메뉴에 마우스를 대면 선택할 수.. 더보기
• 바빌론js - 3차원 웹! 평소 취미 활동대로 이것 저것 다양한 코드의 바다를 순항하던 중 아주 흥미로운 걸 발견했습니다.바로 babylon JS(바빌론JS) 라는건데요.얼마전 다루었던 Three.js와 비슷한 라이브러리로서 웹(Web)에서 3차원 그래픽을 다루는 자바스크립트입니다. 도입부를 시도해보니 어라? 잠깐 투자한 시간 대비 멋진 결과물을 보여줄 수 있어 나름 만족스럽네요.오늘은 해당 부분을 공유드리고자 합니다.본 내용은 공식 문서의 튜토리얼 내용을 소화하여 크레이 나름대로 재작성하였습니다.https://doc.babylonjs.com/journey/theFirstStep플레이 그라운드! 놀이터로 가볼까?바빌론JS는 실시간으로 코드를 작성, 결과를 볼 수 있는 3차원 플레이 그라운드(PlayGround)를 제공합니다.일종의.. 더보기
• 워드 편집하는 PHP, 음? 오늘은 재미난걸 소개해드리려 합니다.바로 PHP 가 MS-WORD 를 실행해서 문서를 작성하는 건데요.폰트크기를 지정하거나 밑줄을 긋기도 하고 심지어 문서를 열어 놓은채로 두거나 저장도 할 수 있습니다.이를 위해 2가지 전제조건이 필요한데요.첫째 윈도우 PC 환경에 XAMPP 를 설치하고,둘째는 윈도우에 MS-WORD 가 설치되어 있어야 합니다.XAMPP 설치는 아래 게시글을 참조해 주시면 됩니다.https://itadventure.tistory.com/627 윈도우에 PHP 8 설치 + MYSQL 연결 예제 ( APM 설치 - 2023. 9. 1기준)오늘은 윈도우에서의 PHP(피에이치피) 설치에 대해 알아보겠습니다. 2023. 9. 1 기준 최신 PHP 버전은 8.2 인데요. 8.3 버전이 있긴 한데 .. 더보기
• 리눅스( CentOS )에서 C# 바로 실행! 오늘은 리눅스 팁을 공유드리고자 합니다.바로 리눅스에서 씨샵(C#) 프로그램을 실행하는 방법인데요.CentOS7을 기준으로 하고 있습니다만 CentOS8에서의 설치 방법도 적어놓도록 하겠습니다.테스트는 못 해봤네요 :)리눅스 터미널 정도는 사용하실 줄 아신다는 기준에서 시작합니다.심심하실까봐 CCM 음악하나 공유드립니다. 들으면 기분이 좋아 지실 거예요 :)설치방법관리자(sudoer) 권한이 있는 사용자로 로그인 한 다음 설치해주시면 되는데요.먼저 아래 명령을 실행한 다음,sudo rpm -Uvh https://packages.microsoft.com/config/centos/7/packages-microsoft-prod.rpm아래 명령을 실행해주시면 됩니다.sudo yum -y install dotne.. 더보기
• 사이드 프로젝트 : "유튜브 배경 영어학습" PHP + Jquery 사이드 프로젝트 공개!현충일과 지난 주말에 개발하긴 했는데 이제야 공개합니다 :)3일 가량 소요된것 같네요.예전에 웹사이트 배경으로 커다란 동영상이 나오는 사이트를 보았던 적이 있는데요.유튜브 배경으로 영상이 나오면서 영어퀴즈를 풀 수 있는 사이트가 있으면 좋을것 같아 만들어 보았습니다.URL 주소 : http://dreamplan7.cafe24.com/english/처음 사이트에 접속하면, Rain 이라는 타이틀과 'Click Any Place' 문구가 뜰텐데요.그 때부터 간단한 문제 풀이가 시작됩니다.특징을 말씀드리면 페이지 전환시 새로 고침이 어보기에 동영상의 재생이 끊기지 않는 다는 점이고,페이지 전환시 FadeIn, FadeOut 효과가 합성되어 화면이 오버레이 된다는 점입니다.이 후 추가한 기.. 더보기
• 파이썬과 PHP의 콜라보! PHP웹에서 그래프 그리기 ( Matplotlib - pyplot ) 파이썬 웹서비스하면 장고(Django)가 유명하지요.그런데 재미 있는 걸 알아 냈습니다.파이썬과 PHP 가 만나면 PHP 에서 파이썬 그래프를 그릴수 있다는 걸 말이지요 :)이건 엄청난건데요. PHP 를 웹서비스를 하면서 파이썬도 할 수 있다는 거거든요.원리는 간단합니다.1) 파이썬에서 그래프를 그립니다.2) 그래프를 stdout 로 출력합니다.3) PHP에서 stdout로 출력한 내용을 받아옵니다.4) base64 img 태그를 이용해 화면에 출력합니다.거두절미 하고 바로 소스를 보겠습니다.파이썬으로 그래프를 그리는 소스를 구성합니다.pyplot.py#!/usr/bin/python -uimport matplotlib.pyplot as pltimport sysplt.rc('font', family='Ma.. 더보기
• 자바 - 백앤드 학습 #4. 스프링-JDBC 네이버에서 제공하는 부스트코스 강좌 "웹 백앤드 심화" 과정에서자바의 JDBC에 대한 기본 학습을 진행하였습니다.https://www.boostcourse.org/web326/lecture/58973?isDesc=false자바와 PHP 차이점을 살펴보니..잠깐 자바와 PHP를 비교해보며 느낀 점을 적어보겠습니다.PHP 의 편리한 개발 방식에 비해, 자바는 매우 불편하다는 느낌을 받았습니다.PHP에서는 1~2줄이면 끝날 코드를 JDBC 는 이런 저런 객체를 가져다가 정확히 일치시켜 주어야 하거든요. 그 과정에 코드가 많아집니다. 그나마 데이터베이스를  다루면서 JDBC를 사용하지 않으면 코드가 더욱 많아집니다.하지만 비록 불편함을 감수하며 얻을 수 있는 이로움은 테이블 필드명을 잘못 기재해 발생하는 문제와.. 더보기
• 구글시트 - 노랑색 셀만 합산?! 구글 시트에서 배경색이 특정색인 셀만 합산하는 기능이 있을까요?확장 프로그램에 있습니다 :)먼저 파워 툴(Power Tools) 확장 프로그램을 설치해야 하는데요.1) 확장 프로그램2) 부가기능 3) 부가 기능 설치 메뉴를 선택 후,4) 검색창에서 Power Tools 를 검색하고5) 아래 이미지와 동일한 이미지를 선택, 설치를 진행해주시면 됩니다.이제 구글 시트 오른쪽에 Power Tools 도구상자가 노출되었을 텐데요. 혹여라도 X 아이콘으로 닫았더라도,1) 확장 프로그램2) Power Tools3) Start 메뉴를 선택하여 다시 띄우실 수 있습니다.이제 시트를 아래와 같이 꾸몄다고 가정합시다.여기서 1행부터 5행까지 노랑색 배경의 갯수 또는 합계를 구하려는게 목적인데요.파워 툴의1) 통계 아이콘 .. 더보기