babylonjs7 3D 에 iframe 을 싸서 먹어보세요 / babylonjs 에 iframe 적용하기 / 메쉬에 iframe 적용하기 / 모달 생성해서 iframe 적용하기 이제 바빌론 공부했던 내용 거의 다 정리해간다! 오늘은 생성했던 월드 내에 iframe 을 이용해서 웹사이트나 유튜브 동영상과 같은 미디어를 구현해 볼 예정이닷 이건 팀장님 아이디어로 공부해보게 된 부분인데, 추후 우리 프로젝트에서 사용될 수 있는 기능이라고 하셔서 공부해보면 좋겠다고 생각했다! (물론 예상보다는 어려웠지만...ㅎ) 아무튼! 같이 시작해보쟝 메쉬에 띄울래? 모달에 띄울래? 일단 아이프레임을 적용하기 전, 메쉬에 띄울지 아니면 개별 모달에 띄울지 결정해야 했다 결론적으로 난 두개 다 구현해보았지만, 순서적으로는 더 어려워보이는 메쉬에 적용을 먼저 구현하긴 했다! 메쉬에 띄우는 것, 모달에 띄우는 것이 뭔지 잘 모르겠다면 일단 간단하게 결과물을 먼저 보여주게따! 위 결과물에서 왼쪽이 메쉬에 .. 2023. 1. 23. 물리엔진을 적용해보자 / 캐릭터가 다가가면 문이 열려요 / 캐릭터가 부딪히면 튕겨져 나와요 / cannon.js 적용기 외부 메쉬도 import 했겠다, 클릭 이벤트와 애니메이션까지 적용했겠다.. 이제 남은 것은 하나다..바로 물리엔진! 물리엔진이 적용되어야 진정한 3D 가 완성된다고 생각해서 거의 마지막 스텝으로 물리엔진을 적용해보기로 했다! 일단 내가 구상한 건, 지금까지 만들었던 집과 문, 그리고 캐릭터에 물리엔진을 적용하여 문과 닿으면 문이 열리고 벽과 닿으면 튕겨지거나 통과하지 못하도록 하는 것이어따 babylon.js 과 함께 사용할 수 있는 (공식 문서에서도 나오는) 물리엔진 라이브러리는 여러개가 있는데, 난 cannon.js 를 사용하기로 했다 처음엔 ammo.js 로 시도했는데, 예시 코드를 그대로 따라해도 이유모를 에러가 발생해서ㅜㅜcannon 으로 교체! 그럼 시작해보자묘! 기본 세팅 일단 라이브러리를.. 2023. 1. 18. 드디어 외부 메쉬 불러오기 / blender 처음 다뤄보기 / 무료로 풀어주는 능력자들 사랑혀 / 애니메이션까지! 메쉬도 생성해보고, 애니메이션과 액션도 적용해봤으니 이제 진짜 제대로 된 월드를 만들어보고싶어졌다 그래서 이제는 카메라를 움직이는게 아닌, 외부 메쉬를 import 해서 캐릭터처럼 움직여보고 상호작용도 적용해보기로 했다! 일단 불러올 외부 메쉬가 있어야 한다 외부 메쉬를 불러오려고 봤더니...난 불러올 외부 메쉬 파일이 없었다 그래서 일단 바빌론 공식 문서를 조져봤더니, 깃헙에서 공유해주는 몇가지 모델들이 있어서 일단 그 모델을 이용해보기로 했다! 깃헙에 올라가있어서 다운받을 필요도 없이 url 로 바로 불러올 수 있어서 개이득! 나는 많은 메쉬들 중 shark 라는 상어 모양 메쉬를 불러와 사용해보기로 했다 3D 모델들에는 다양한 확장자가 있는데, glb, gflb, 심지어는 babylon 이라는 확장.. 2023. 1. 14. 메쉬에도 onClick 이벤트를 적용할 수 있다면 / action manager / 바빌론 클릭 이벤트 저번 포스팅으로 만들었던 메쉬와 카메라에 프레임 단위로 애니메이션을 적용했는데, 자동으로 문이 열리는 애니메이션을 보면서 자동으로 열리는게 아닌 직접 클릭했을 때 문이 열리도록 할 수 있는지 궁금해졌다! 찾아보니 바빌론에서는 이벤트를 액션이라고 하고, 그 이벤트가 일어나는 메쉬에 actionManager 를 이용하여 액션을 달아주는 방식으로 진행되더라! 한 번 해보자 actionManager // ... door.actionManager = new ActionManager(scene); door.actionManager.registerAction( new ExecuteCodeAction(ActionManager.OnPickUpTrigger, async function () { if (hinge.rotat.. 2023. 1. 11. 애니메이션의 적용으로 3D는 완성된다 / babylon.js 애니메이션 적용하기 / 카메라 이동 애니메이션 저번 포스팅까지 우리는 3D 월드 안에 메쉬로 집을 지어봤당! 이 때 기본으로 설정한 카메라를 통해 자동으로 카메라 시점을 바꿀 수 있었는데, 오늘은 프레임 단위로 애니메이션을 적용하여 자동으로 카메라 시점을 바꿔 1인칭으로 움직이는 것 처럼 만들어보아따 그럼 시작! 만들고자 하는 애니메이션에 대한 구상 일단 이 애니메이션 적용에서 부터는 공식 문서의 특정한 예제를 보고 따라한 것이 아니어따..! 그래서 구글링 한 오픈소스들을 기반으로 나도 이런걸 만들어봐야겠다 혼자 구상하고 구현해야 했기 때문에 어떤 장면을 만들건지 미리 생각을 해야했다 내가 만드려고 한건 저번 시간까지 만든 집을 조금 업그레이드 해서, 문을 달고 그 문이 열리면서 집 안으로 들어가는 화면! 비슷한 화면을 다른 사람이 구현한 코드에서 .. 2023. 1. 7. 드디어 무언가를 지어보자 / createMesh 로 메쉬 생성 / material 과 texture 설정 저번 시간까지 기본적인 프로젝트 구조를 잡았기 때문에, 드디어 오늘 메쉬를 생성해 볼 수 있게 되어따 실제 프로젝트에서는 외부에서 메쉬를 import 해와서 사용할 것 같지만, 직접 기본적인 메쉬를 생성하며 개념도 이해할 수 있고 또 이 예제를 푸는 당시에는 블렌더를 다룰 줄 몰랐기 때문에 일단 직접 만들어 보는 것으로! ground mesh 생성, material 적용 const createScene = () => { // ... // built-in ground 생성 let ground = CreateGround("ground", { width: 6, height: 6 }, scene); let groundMaterial = new StandardMaterial("Ground Material", sc.. 2023. 1. 4. 이전 1 2 다음
