Dev/web3D10 R3F configurator 강의 후기 / three.js 로 기깔나는 인트로 페이지를 만들어보자 / 디자인과 친해지기 프로젝트 스트레스에 하루하루 말라가고 있는 요즘... 스트레스만 받고 프로젝트는 제대로 안굴러가서 바쁘지는 않는데 마감일은 다가와서 거의 뭐 뇌정지 상태에 있는 요즘... 뭐라도 해야겠다 싶어서 udemy 강의를 구경하다 요런 강의를 발견했따 https://kmooc.udemy.com/course/react-three-fiber-configurator/learn/lecture/36719356#overview 얼마 전 판교에서 강의도 들었던 react-three-fiber 로 3D configurator 도 만들고, ui animation 도 추가해서 멋드러진 인트로 페이지를 만드는 강의였당 시간도 2시간정도로 짧고, 시간 대비 꽤나 괜찮은 결과물을 만들 수 있는 것 같아서 바로 듣기 시작했다! INTRO.. 2023. 8. 18. 메타버스 캠퍼스 교육 후기 / R3F(React Three Fiber)를 이용한 인터렉티브 3D 가상환경 웹 개발 / 4일간의 판교 생활 6월 중순 쯤, 먼저 하던 프로젝트는 마무리가 되고 다음 프로젝트 제안서 작업을 할 때 즈음 팀장님께서 한 번 신청해보라며 메타버스 캠퍼스 강의 하나를 추천해주셨다! 수업은 판교에서 듣고, 10시부터 5시였기에 난 오잉 개꿀? 하며 신청했음! https://www.metaverse-campus.kr/lecture/viewAll.do?pageIndex=1&menu_idx=50&lecIdx=17&proIdx=168&selYear=&selApplyStatus= 메타버스 Campus > 교육신청 > 제작역량강화 교육 제작역량강화 교육 www.metaverse-campus.kr 사실 그 전에 유니티 관련 강의도 있었는데 그건 떨어졌던 경험이 있어서ㅋㅋㅋ조금 긴장했지만 이번 R3F 강의는 내가 three 나 bab.. 2023. 7. 11. 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. 이전 1 2 다음
