React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
React와 Three.js 를 한번에! 3D 기초부터 현업에 사용할 수 있는 프로젝트 그리고 최적화 팁 까지 !
수강생 281명
난이도 초급
수강기한 무제한

다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결
오브젝트에의 이벤트 감지 vs 레이캐스팅
안녕하세요.경험이 더 쌓이거나 혹은 뒤에 진행될 프로젝트를 통해 해소될 수도 있지만 짚고 넘어가고 싶어서 여쭙습니다!<p style="text-align:
javascriptreacttypescript인터랙티브-웹three.jswebglreact-three-fiberliterate_t
・
한 달 전
0
32
2
- 미해결
섹션 10을 들었을때 궁금증
primitive는 map을 통해 texture를 불러올 수 없을까요? 다른 텍스쳐 불러오는 연습을 하면서 Material에서는 map이라는 속성을
javascriptreacttypescript인터랙티브-웹three.jswebglreact-three-fiberstudy with dino
・
5달 전
0
69
2
- 미해결
material 파트까지 들은 후 생긴 궁금증
안녕하세요 선생님. material까지 강의를 들으면서 두 가지 궁금한 점이 생겼습니다. 로컬 서버에서 ctrl+s 하면 자동
javascriptreacttypescript인터랙티브-웹three.jswebglreact-three-fiberdbjoung
・
일 년 전
0
136
1
- 미해결
zoom과 fov의 차이점이 잘 이해가 안됩니다.
섹션3- 3D 구성요소 알아보기 강의 에서 설명주신것중 강의에서는 fov와 zoom의 수치를 감소시키거나 증가시켰을때, 선이라고 해야하나요? Cam이 찍고있는 좁아지고 넓어지는 그 선의 범위가 fov와 zoom이 같은 것 같아서 헷갈립니다!혹시 어떤
javascriptreacttypescript인터랙티브-웹three.jswebglreact-three-fiber박주현
・
일 년 전
1
224
2
- 해결
1강 관련하여 의견을 여쭙고 싶은 게 있습니다.
안녕하세요 선생님. 무료보기 시청 후 바로 결제해서 달리고 있습니다. 하루 1강씩 뚫어보려고 합니다 😋 다름이아니라 DOM, SVG, Canvas를 비교해서 설명해주신 부분에서
javascriptreacttypescript인터랙티브-웹three.jswebglreact-three-fiberdbjoung
・
일 년 전
0
112
1
- 해결
'JSX.IntrinsicElements' 유형에 'mesh' 속성이 없습니다. 경고 해결법
전 영상과 똑같이 npm으로 설치하는 과정에서 에러가 발생하시는 분들을 위한 제 해결법입니다. (2025-02 기준) 강사님이 올려주신 소스코드 다운로드
reacttypescriptthree.jsreact-three-fiber김수로
・
1
274
2
- 해결
onClick 이벤트함수로 raycaster 방향이 자동으로 set되나요?
const shoesClick = () => { const intersects = raycaster.intersectObjects( gltf.scene.children, true ); }
javascriptreacttypescript인터랙티브-웹three.jswebglreact-three-fibergrs0412
・
0
164
2
- 해결
화면에 렌더링은 되는데 코드에서 빨간줄이 떠요
{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ]
javascriptreacttypescript인터랙티브-웹three.jswebglreact-three-fiberkiseon Han
・
0
353
2
- 해결
문제 해결했습니다.
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import path, {resolve} from 'p
javascriptreacttypescript인터랙티브-웹three.jswebglreact-three-fiber이명재TV
・
0
168
1
- 해결
문제 있어요! alias Path @ 문제
{ "compilerOptions": { "baseUrl": ".", "paths": { "@components/*" : ["src/components/*"], "@sr
javascriptreacttypescript인터랙티브-웹three.jswebglreact-three-fiber이명재TV
・
0
438
2
- 해결
dom / svg / canvas
혹시 웹에서 원하는 곳에 이미지를 애니메이션으로 보내거나 웹을 구성할때 canvas로는 좌표를 찍어 위치를 조정하기 쉬워보이는데 dom / svg를 활용할땐 웹에 원하는 곳으로 배치하기 위해선 그리드를 활용해야하나요 보통?
javascriptreacttypescript인터랙티브-웹three.jswebglreact-three-fibermirage0720
・
0
219
1
- 해결
물질을 클릭했을 때 이벤트
물질에게 클릭이벤트를 주어 보이는 시점이 바뀌거나 물체가 이동할수있게 하고싶습니다.
javascriptreacttypescript인터랙티브-웹three.jswebglreact-three-fiber: 흥
・
0
393
1






