Thumbnail
개발 · 프로그래밍프론트엔드

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발대시보드

(5)
9개의 수강평 ∙ 120명의 수강생
132,000원

월 26,400원

5개월 할부 시
지식공유자: 코딩의세계 한태재
총 63개 수업 (10시간 2분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가공유
  • 유동원 (mirage0720) 프로필유동원 (mirage0720)
    2024-07-101318162

    혹시 이 강의를 통해서 웹에서 홀덤같은 카드게임을 만들어 보려 하는데 카드를 뒤집고 나눠주는 동작을 실감나게 하고 싶은데 강의내용에 적합한지 알 수 있을까요? 카드를 뒤집고 나눠주는 연출을 자바스크립트와 3js로 하고자 공부 중에 강의를 찾게 되었는데 혹시 위와 관련된 기능 부분이 있다면 어딜 먼저 보는게 좋을까요?

    코딩의세계 한태재
    코딩의세계 한태재
    코딩의세계 한태재
    2024-07-10352776

    안녕하세요 유동원님 질문 감사합니다! 어느정도 JS와 프론트엔드/React 지식과 경험이 있으신가요? 그렇다면 좀 더 수월하게 배우실 수 있을 것 같습니다. 원하시는 ‘카드를 뒤집고 나눠주는 동작을 실감나게’에 대한 구현이 어느정도인지 정확히는 알 수 없지만 그래도 이 강의에서 웹 3D의 모든 기초는 다루고 있으니 충분히 도움이 되실거라고 생각합니다. 특히나 먼저 3섹션3(R3F 설명)과 섹션4(Object 3D)를 먼저 보시면 좋을것 같습니다. 카드를 뒤집고 나눠주는 부분에서 object3D의 포지션과 회전을 많이 사용할 것 같습니다. 그 정도는 이 강의에서 다루고 있습니다. 하지만 좀 더 실감나게 하려면 다양한 커브를 사용해서 카드의 포지션을 변경한다거나 하는 등의 추가 구현이 필요하겠지만 이 강의에서는 다루지 않습니다. 또다른 R3F강의를 제작중인데 아마도 그 강의에서 좀 더 자세히 다룰 수 있을 것 같습니다. 모든 강의가 그렇겠지만 딱 원하는 화면을 구현하기에는 강의하나를 듣는 것 만으로는 무리가 있고 조금씩 연습해서 경험이 쌓여야 한다고 생각합니다. 구현하시면서 질문 있으시면 언제든지 여기에 남겨주셔도 되고 아래 카카오톡 오픈채팅방에 들어오셔서 공개적으로질문하시거나 1:1로 질문해주셔도 답변 드리겠습니다. 감사합니다! https://open.kakao.com/o/g5uzfljg

  • dlawnsdlekd 프로필dlawnsdlekd
    2024-07-091317201

    강의에서 사용하는 노드 버전좀 알려주세요!

    코딩의세계 한태재
    코딩의세계 한태재
    코딩의세계 한태재
    2024-07-09352588

    안녕하세요. dlawnsdlekd님! 강의에서 사용하는 노드버젼은 node v16.20.2 / npm 8.19.4를 사용했습니다. 감사합니다!

  • dlawnsdlekd 프로필dlawnsdlekd
    2024-07-051313292

    안녕하세요! 프로젝트 구상중에 있는데, WebRTC를 사용한 실시간 화상강의에서 버츄얼 아바타를 사용하려고 합니다. r3f를 학습하고 프로젝트에 적용할 수준까지 시간이 대략 어느정도 소요될까요?

    코딩의세계 한태재
    코딩의세계 한태재
    코딩의세계 한태재
    2024-07-05351610

    안녕하세요. dlawnsdlekd님 질문 감사합니다! 어떤 버츄얼 아바타를 사용하시는지 궁금하네요. 3D 모델링+리깅+애니메이션이 적용된 아바타일까요? 아니면 이미지나 영상으로 된 것을 사용하시는 걸까요? 모든 리소스가 준비된 상황에서 테스트를 해본다고 하면 간단한 데모정도라면 3개월안에 가능할 것으로 보입니다. 그것도 사람마다 다르겠지만 개발자 중급정도 이상이라면 그정도가 걸리지 않을까 생각됩니다. 이것 또한 저의 예측일 뿐이고 자세한 프로젝트 목표와 상황 그리고 기대하는 구현정도에 따라 달라질 것 같아요 ㅎ 또 질문있으시면 남겨주세요! 감사합니다.

  • 동우 프로필동우
    2024-02-191183970

    안녕하세요! r3f 라는 기술에 궁금증이 생겨 찾아보다가 강의를 발견하게 되어 질문 올리게되었습니다 현제 저는 자바스크립트 기초 문법을 아주 조금 알고있는 정도의 비전공자인데요..! 혹시 리액트를 아직 배운적이 없더라도 강의를 수강하는데 어려움이 없을까요?? 강의 설명에 자바스크립트 문법만 알면 배울수 있다기에 궁금증이 생겨 질문하게되었습니다!

    코딩의세계 한태재
    코딩의세계 한태재
    코딩의세계 한태재
    2024-02-20319410

    안녕하세요 동우님 질문 감사드립니다. 강의는 거의 3D (Three.js) 위주의 수업이 대부분 입니다. 리액트(UI)에 대한 부분은 많이 필요하지 않고 기초적인 부분만 다룹니다 다만 강의 후반에는 리액트로 UI를 만드는데 '이렇게 할 수있다' 정로도 빠르게 넘어갑니다. 그래서 강의를 들으실때는 리액트를 모르셔도 문제없긴 하지만 나중에 혼자 프로젝트 작업을 하신다면 필요할 것 같습니다. 그리고 참고로 강의는 Javascript가 아닌 Typescript로 진행합니다. 이 역시 Js를 아신다면 어렵진 않으실거라고 생각합니다. 다른 문의 있으시면 편하게 남겨주세요! 감사합니다

  • 안용호 프로필안용호
    2024-02-061168294

    저의 딸이 지금 개발자를 꿈꾸며 고교에서 소프트웨어 관련 언어를 공부하고있습니다. 개발자의 영역은 너무나도 광범위해서 직업에 대한 추천을 고민하던차에 한태재님의 영상을 보고, 바로 이직업이다 라는 영감을 얻었습니다. 참고로, 저는 딸의 아빠이기전에 과거 게임모델러를 꿈꾸던 웹디자이너입니다. 20여년전 게임쪽으로 이직을 준비하던중 우연히 네오위즈 본사를 방문했고, 게임관련 강의에서 '제로썸' 이야기를 들었던 기억이나네요~ 복잡한 3D오브젝트를 구현하고자 할때는 3D프로그램을 이용해 만든 오브젝트(학습자료/신발3D 모델일 파일)를 불러와 카메라+렌더링 등을 코딩하는 방식으로 이해하는게 맞는지가 첫번째 질문이고요, 두번째 질문은, 현재 3D프로그램으로는 C4D를 사용중인데 블렌더 프로그램을 사용하지 않고도 C4D프로그램(등 그외)을 이용해 모델링파일수정 및 GBL로 저장하고 불러오는려면 어떤점을 체크해야 가능한지 여쭙고자 합니다. 마지막으로 , 이자리를 빌어 소중한 정보를 수강영상을 통해 접할 수 있게해주신것에 대해 감사의 말씀을 올립니다.^^

    코딩의세계 한태재
    코딩의세계 한태재
    코딩의세계 한태재
    2024-02-06316384

    안녕하세요. 질문해주셔서 감사드립니다. 딸의 꿈을 같이 고민하시다니 좋은 아버지이신것 같네요 ㅎㅎ 오, 모델러와 디자인을 하셨으면 3D/2D쪽 둘다 감각이 있으시겠네요 아시겠지만 요새 클라이언트/프론트엔드/그래픽엔지니어 등 사용자의 화면을 개발하는 개발자들은 디자인/미적인 감각을 같이 요구하는 경우가 많습니다. 따님도 다양한 분야를 경험해보면 자신에게 맞는 일을 찾을 수 있을 거라고 생각합니다. 요새는 하나만 하기보다는 다양한 분야를 융합하는 인재가 더 필요하다고 생각해요. 따님분의 꿈을 응원하겠습니다. 첫번째 질문부터 답변드리겠습니다. 질문주신 내용이 맞습니다. 복잡한 오브젝트는 3D 프로그램으로 렌더링 한 후에import해서 사용합니다. 참고로 카메라의 애니메이션도 역시 미리 3D 프로그램으로 만든 후 불러와서 사용할 수 있습니다. 렌더러는 불러온 곳에서 사용하는 렌더러를 사용해야겠죠. (three.js를 쓴다면 three.js 렌더러..) 두번째 질문 답입니다. 시네마4D 역시 glb/gltf 파일로 export할 수 있습니다. 그 외에 맥스/마야/블렌더 등등 모두 glb/glft로 export가 가능합니다. 각 툴마다/버젼마다 디폴트 옵션이 조금씩 다르다고 알고 있습니다. 일반적인 사용에서는 옵션까지는 상세하게 알 필요는 없으시고, 오브젝트와 더불어 오브젝트의 텍스쳐와 애니메이션도 잘 export되고 import되는지만 확인하시면 될 것 같습니다. import되는 것은 직접 코딩하지 않으셔도 아래와 같은 웹 사이트를 이용하면 바로 확인 가능합니다. https://threejs.org/editor/ https://nilooy.github.io/character-animation-combiner/ 다른 질문 있으시면 편하게 알려주세요. 감사합니다.

채널톡 아이콘