월 26,400원
5개월 할부 시
김수로2025-02-121519215안녕하세요 강사님. 지금 현재 강의를 구매할지 고민하는 학생입니다. 고민하는 이유는 현재 R3F는 아직 React19와 호환이 안되는걸로 알고있습니다. React19 호환성 이슈 : (https://github.com/pmndrs/drei/issues/2260) 그래서 저도 따로 공부할때 React 18버전으로 다운그레이드하고 공부를 하는데 이 강의에서는 어떻게 해결하는지 여쭙고싶습니다
- wl9902025-02-081514964
안녕하세요 선생님, 현재 진행 중인 R3F 강의를 들으면서, https://jesse-zhou.com/같은 인터랙티브 모델을 프로젝트에 구현하고 싶습니다. 이 강의를 통해 제가 저 웹사이트 같은 모델 구현이 가능할까요?
코딩의세계 한태재2025-02-08397126안녕하세요. wl990님. 질문주셔서 감사드립니다. 해당 사이트를 살펴봤는데요, 강의 초반에는 r3f(three.js)에 대한 기초개념을 주로 다루고 있고, 강의 후반에서는 해당 사이트에서 사용하는 것처럼 모델링 파일을 로드하고, 카메라를 특정 오브젝트로 이동하는 방법에 대해서 다루고 있습니다. 사이트에 나오는 것 같은 모델링 파일을 잘 구하시면 비슷한 형태로 구현이 가능할 것으로 보입니다. 하지만 프로젝트의 완성도를 높이기 위해 네온사인처럼 빛나는 material이나 lighting을 주는 것과 같은 부분, 그리고 mesh에 이미지/영상/web사이트를 넣는 부분은 직접 구현하시면서 해결하셔야 할 것 같아요. 강의에서 three.js 공식사이트를 보면서 다양한 geometry, material을 사용하는 방법을 다루고 있으니 한번 해보시면서 잘 안되시는 부분은 질문 남겨주시면 같이 고민해보도록 하겠습니다. 다른 질문 있으시면 편하게 알려주세요. 감사합니다 :)
- 김강연2025-01-271504607
선생님 지금 기초 공부 중인데 나중에 강의를 사서 들을건데 혹시 2개중에 뭘 들어야 하나용? 2개 다 들으면 되나요?
코딩의세계 한태재2025-01-27394904안녕하세요. 강연님. 웹 3D기초가 없고 처음 들으시는거라면 ‘ React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발’을 먼저 들으시는게 좋습니다 ㅎㅎ 먼저 듣고나서 더 듣고싶으시면 다음 강의도 들어보시면 3D 기초에 도움이 될것 같습니다. 들으시면서 질문있으시면 편하게 남겨주세요 감사합니다 :)
- 노력왕2024-09-131380062
안녕하세요 :) 혹시 차기 강의 계획이 있으신지 궁금합니다
코딩의세계 한태재2024-09-13366750안녕하세요! Avalon님. 질문주시고 관심 갖어주셔서 감사합니다. 6개월전부터 조금씩 새로운 강의를 만들어 오고 있고, 9월 내에 런칭 할 예정입니다. 간단히 먼저 소개드리면 r3f로 만드는 creatvie coding 관련 내용입니다. 그래픽스의 기본인 vector 연산에 대해서 주로 다루고 있고 관련 귀여운? 실습 예제가 2~3개 포함될 예정입니다. 런칭 하면 바로 알려드리겠습니다! 앞으로도 계속 중급/고급 강의를 제작예정이고요 ㅎㅎ 원하시는 수강 내용있으시면 알려주시면 참고하여 추가 제작도 검토하겠습니다. 감사합니다 :)
- 유동원 (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
- dlawnsdlekd2024-07-091317201
강의에서 사용하는 노드 버전좀 알려주세요!
코딩의세계 한태재2024-07-09352588안녕하세요. dlawnsdlekd님! 강의에서 사용하는 노드버젼은 node v16.20.2 / npm 8.19.4를 사용했습니다. 감사합니다!
- dlawnsdlekd2024-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/ 다른 질문 있으시면 편하게 알려주세요. 감사합니다.
안녕하세요. 수로님 질문주셔서 감사드립니다. 강의를 찍을 당시에는 react 18버젼이 latest였는데 19로 업그레이드 되면서 r3f와 호환되지 않는것 같습니다. 해결할 수 있는 방법이 여러가지 있겠지만 가장 쉬운방법은 강의에서 제공하는 소스코드파일을 다운로드 받아서 그냥 npm install하시고 npm run dev로 실행하시는 방법이 있습니다. 강의에서 제공되는 소스코드 파일은 package.json에서 보시면 react와 react-dom의 버젼이 18.2.0으로 되어있어서 바로 r3f와 같이 사용하실 수 있습니다. 또다른 방법으로는 강의에서 나온것처럼 npm create vite@latest로 프로젝트를 만드시고 해당 프로젝트 폴더로 들어가셔서 react와 react-dom을 다운그레이드 하는 방법이 있을 수 있을것 같습니다. 폴더 이름이 r3f_basic이라고 만드셨다면 1. 해당 폴더로 들어가서 cd r3f_basic 2. react와 react-dom을 다운그레이드하고 r3f, three를 설치하시는 방법입니다. npm install react@18 react-dom@18 @react-three/fiber three 하시다가 잘 안되시거나 질문 있으시면 편하게 남겨주세요. 감사합니다 :)