taejaehan
@taejaehan
Students
364
Reviews
27
Course Rating
5.0
Posts
Q&A
ai ๋๊ตฌ ์ง๋ฌธ
์๋ ํ์ธ์. ์ง๋ฌธ๊ฐ์ฌ๋๋ฆฝ๋๋ค.์์ '์์ฑํ 3D AI' ๊ฐ์ ํค์๋๋ก ๊ฒ์ํ์๋ฉด ๋ง์ ์๋น์ค๋ค์ด ์์ต๋๋ค.์ด๋ฏธ์ง๋ง์ผ๋ก 3D ๋ชจ๋ธ๋งํ์ผ(fbx, glb๋ฑ)์ ๋ง๋ค์ด ์ฃผ๋ ์๋น์ค๋ค์ ๋๋ค. ์์๋ก๋ Meshy AI, Tripo AI, varco 3d ๋ฑ์ด ์์ต๋๋ค.ํ๋ฒ ์ฌ์ฉํด๋ณด์ ๋ ์ข์๊ฒ ๊ฐ์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค.
- 0
- 1
- 27
Q&A
์ค๋ธ์ ํธ์์ ์ด๋ฒคํธ ๊ฐ์ง vs ๋ ์ด์บ์คํ
์๋ ํ์ธ์. literate_t๋ ์ง๋ฌธ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.์ ๋ ์๋กญ๊ฒ ์๊ฐํด๋ณด๊ฒ๋๋ค์.์์ three.js์์๋ mesh๊ฐ์ dom์ด ์๊ธฐ๋๋ฌธ์ ์ด๋ฒคํธ๋ฅผ ๋ฑ๋กํ ์์๊ธฐ๋๋ฌธ์ ๋ฌด์กฐ๊ฑด raycaster๋ฅผ์จ์ผํ์ต๋๋ค. ๊ทธ๋ฌ๋ r3f์์๋ mesh๋ฑ์ ์ด๋ฒคํธ ๋ฑ๋ก์ด ๊ฐ๋ฅํ๊ธฐ๋๋ฌธ์ raycaster๋ฅผ ๊ตณ์ด ์ฐ์ง ์์ผ์ ๋๋ฉ๋๋ค. (์ฐธ๊ณ ๋ก r3f์์ ์ด๋ฒคํธ๋ฑ๋ก์ ๋ด๋ถ์ ์ผ๋ก raycaster๋ฅผ ์ฌ์ฉํฉ๋๋ค) ๊ทธ๋ฌ๋ raycaster๋ฅผ ๋ฐ๋์ ์จ์ผํ๋ ์ํฉ์, ๊ฒ์/์๋ฎฌ๋ ์ด์ ๊ฐ์ ๊ฒ์ ๊ตฌํํ ๋์ด์/๋ ์ด์ ๊ฐ ๋ฐ์ฌ๋ ๋ ๋ง๋ ๋์๋ค์ ํ๋ณ์์ ์ฅ์ ๋ฌผ๋ค์ด ์๋์ง ๊ฒ์ฌํน์ ๊ทธ๋ฃน์ด๋ ํน์ ๋ ์ด์ด๋ค๋ง ๊ฒ์ฌ๋ฑ๋ฑ ์ฌ๋ฌ๊ฐ์ง ์ํฉ์ด ์์๊ฒ ๊ฐ์ต๋๋ค.๋ง์ ์ฃผ์ ๋๋ก ๊ฒฝํ์ด ๋ ์์ด์๋ฉด raycaster๋ฅผ ์จ์ผํ๋ ์ํฉ์ด ์๊ธธ๊ฒ ๊ฐ์๋ฐ์ ใ ใ ๋์ค์ ๊ณต์ ํด์ฃผ์๋ฉด ์ข์๊ฒ ๊ฐ์ต๋๋ค.๊ฐ์ฌํฉ๋๋ค!
- 0
- 2
- 55
Q&A
๋จ์ ๋ฒกํฐ์ ๊ฑฐ๋ฆฌ๋ฅผ ๋ค์ ๊ณฑํ๋ ๋ถ๋ถ ์ง๋ฌธ ์์ต๋๋ค.
์๋ ํ์ธ์ literate_t๋ ์ง๋ฌธ์ฃผ์ ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค. ์ด๋ค ๋ฒกํฐ๋ ํด๋น ๋ฒกํฐ์ ๊ฑฐ๋ฆฌ๋ฅผ ๊ตฌํ๋ ค๋ฉด ์์ ์ผ๋ก ๋ถํฐ ๊ตฌํ๋ ๊ฒ์ด ๋ง์ต๋๋ค.๊ทธ๋์ bearToHoneyVec๋ ์์ ์ผ๋ก ๋ถํฐ distanceTo๋ฅผ ํด์ผ์ง distBearToHoneyVec๊ฐ ๋์ต๋๋ค. ๋ง์ํ์ ๊ฒ์ฒ๋ผ ๊ณฐ์์ ๊ฟ๊น์ง์ ๊ฑฐ๋ฆฌ๋ฅผ ๊ตฌํด๋ ๊ฐ์ ๊ฐ์ด ๋์ฌ๊ฒ์ ๋๋ค. bearVec.distanceTo(honeyVec) ์ผ๋ก ํ๋ฉด ์ง์ ์ ์ผ๋ก ๊ณฐ๋ถํฐ ๊ฟ๊น์ง์ ๊ฑฐ๋ฆฌ๊ฐ ๋์ค๋ ๊ฒ์ด๊ณ bearToHoneyVec.distanceTo(์์ )์ ํ๋ฉด ๊ณฐ์์ ๊ฟ๋ก ๊ฐ๋๋ฒกํฐ๋ฅผ ๊ตฌํ๊ณ ๊ทธ ๋ฒกํฐ์ ๊ฑฐ๋ฆฌ๋ฅผ ๊ตฌํ๋ ํํ์ ๋๋ค. 2๊ฐ์ ๊ฑฐ๋ฆฌ๋ ๊ฐ์๊ฐ์ด ๋์์ผ๊ฒ ์ฃ . ์ฐธ๊ณ ๋ก ๊ณฐ๋ฒกํฐ์ ๊ฑฐ๋ฆฌ (bearVec.distanceTo(์์ ))๋ฅผ ๊ตฌํ๋ฉด๊ณฐ์ด ์์ ์ผ๋ก ๋ถํฐ ์ผ๋ง๋ ๋จ์ด์ ธ์๋๋๊ฐ ๋ ๊ฒ์ด๊ณ ๊ฟ๋ ๋ง์ฐฌ๊ฐ์ง๋ก ๊ฟ์ด ์ผ๋ง๋ ์์ ์ผ๋ก ๋ถํฐ ๋จ์ด์ ธ์๋(๊ฟ๋ฒกํฐ์๊ฑฐ๋ฆฌ)๊ฐ ๋ ์ ์์ต๋๋ค. ์กฐ๊ธ ํท๊ฐ๋ฆฌ์ค์์๋๋ฐ ์ฐจ๋ถํ ์๊ฐํด๋ณด์๋ฉด ์ดํด๋์ค๊ฒ ๊ฐ์ต๋๋ค! ๋ค๋ฅธ์ง๋ฌธ์์ผ์๋ฉด ํธํ๊ฒ ๋จ๊ฒจ์ฃผ์ธ์! ๊ฐ์ฌํฉ๋๋ค.
- 0
- 1
- 46
Q&A
์น์ 10์ ๋ค์์๋ ๊ถ๊ธ์ฆ
์๋ ํ์ธ์. study with dino๋ ์ง๋ฌธ์ฃผ์ ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค. ๋จผ์ primitive์ ๊ตฌ์กฐ์ ๋ฐ๋ผ ์กฐ๊ธ ๋ค๋ฅผ ์ ์์ต๋๋ค.primitive์ ๋ฃ๋ object์ ๋ํด์ console.log์ฐ์ด์ ๋ณด์๋ฉด ํด๋น object์ ๋ํ ๊ตฌ์กฐ๊ฐ ๋์ฌํ ๋ฐ์.group์์ group์ด ๋ ์๊ฑฐ๋ mesh๊ฐ ์์ ์๋ ์์ด์. ํ๋ฒ ์ดํด๋ณด์ธ์.group์ด ๋ผ๋ฉด child๋ฅผ ๊ณ์ ๊ฒ์ฌํ์๋ค๋ณด๋ฉด mesh๊ฐ ๋์ฌ ๊ฒ์ด๊ณ ๊ทธ mesh์ ๋ํ material์ ๋ํ map์ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค. ๊ฐ๋จํ๊ฒ ์๋์ฒ๋ผ ์ฝ๋๋ฅผ ๋ง๋ค๋ฉด ์๋ํ ๊ฒ ๊ฐ์ต๋๋ค. useEffect(() => { object.traverse((child: THREE.Object3D) => { if (child instanceof THREE.Group){ child.traverse((ch: THREE.Object3D) => { if (ch instanceof THREE.Group){ // loop more .. }else{ if (child instanceof THREE.Mesh) { child.material.map = texture; child.material.needsUpdate = true; } } }); }else{ if (child instanceof THREE.Mesh) { child.material.map = texture; child.material.needsUpdate = true; } } }); }, [object, texture]); ๊ทธ๋ฆฌ๊ณ fbx ํ์ผ์ ๊ฐ์ ธ์ฌ ๋ ํ ์ค์ณ๋ ํจ๊ป ๋ถ๋ฌ์ค๋ ค๋ฉด ๋ธ๋ ๋ ๋ฑ ๋ชจ๋ธ๋ง ํด์์ exportํ ๋ texture๋ฅผ ํฌํจํ๋ ์ต์ ์ ์ค์ผํฉ๋๋ค. ๊ทธ๋ ๊ฒ ํ๋ฉด fbxํ์ผ ์์ฒด์ ํด๋น textrue๋ค์ ์์น์ ๋ํด ์ ์ฅ๋์ด์์๊ฒ์ด๊ณ , ๊ทธ textureํ์ผ์ด ์ค์ ๊ทธ ์์น์ ์์ด์ผํฉ๋๋ค. ๊ทธ๋์ r3f์์ ์ฌ์ฉํ ๋๋ fbxํ์ผ๊ณผ textureํ์ผ๋ค์ ๋ชจ๋ํจ๊ป ํฌํจํ์ฌ ํ๋ก์ ํธ์์ ๋ฃ์ผ์ ์ผ ํฉ๋๋ค. ํน์๋ ํ์๋ค๊ฐ ๋ ์๋์๋๊ฒ ์์ผ๋ฉด ์ง๋ฌธ ์ฃผ์๋ฉด ๊ฐ์ด ์ดํด๋ณด๊ฒ ์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค :)
- 0
- 2
- 87
Q&A
material ํํธ๊น์ง ๋ค์ ํ ์๊ธด ๊ถ๊ธ์ฆ
์๋ ํ์ธ์. dbjoung๋ ์ง๋ฌธ์ฃผ์ ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค. ใ ใ 1.R3F์ three.js๊ฐ์ฒด๋ค ์ค์ React lifecycle๊ณผ ๋ ๋ฆฝ์ ์ผ๋ก ๋์ํ๋ ๋ถ๋ถ์ hot reload์์๋ ๋ณ๊ฒฝ๋์ง ์์ ์ ์์ต๋๋ค. ์๋ฅผ๋ค์ด useRef๋ก mesh, material, geometry๋ฅผ ์ง์ ์์ ํ๊ฒฝ์ฐ hot reload์์ ๋ฐ์๋์ง ์์ ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ useLoader, useGLTF, useTexture๋ฅผ ์ฌ์ฉํ๋ ๋ถ๋ถ๋ ๋ฉ๋ชจ๋ฆฌ์ ์บ์ฑ๋๊ธฐ ๋๋ฌธ์ ๋ณ๊ฒฝ ํ hot reload๋ ๋ ๋ณ๊ฒฝ๋์ง ์์ ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ง์ ์ฃผ์ ๊ฒ์ฒ๋ผ material wireframe ์ ์ฉ์ด๋ camera fov, far ์์ฑ๋ฑ์ material๊ฐ์ฒด์ camera๊ฐ์ฒด๋ฅผ ์ธ์คํด์คํ ํด์ ์ฌ์ฉํ๊ธฐ๋๋ฌธ์ ๋ฐ๋ก ์ ์ฉ๋์ง ์์ต๋๋ค. ์์ three.js๋ฒ์ ผ์์๋ ์๋์ผ๋ก material๊ฐ์ ์์ฑ๋ค์ ์๋์ผ๋ก ์ ๋ฐ์ดํธํด์คฌ๋๋ฐ, ์ต๊ทผ three.js๋ฒ์ ผ์์๋ ํผํฌ๋จผ์ค ์ด์๋ก ์๋์ผ๋ก ์ ๋ฐ์ดํธ ํ์ง ์๊ณ ๋ช ์์ ์ผ๋ก ์ ๋ฐ์ดํธ ํด์ผํ๋ ๊ฒฝ์ฐ๋ ์์ต๋๋ค. ์ค์ ํ๋ก์ ํธ์์๋ ์ํ๋ ํ์ด๋ฐ์ ์ ๋ฐ์ดํธํ๋ ์ฝ๋๋ฅผ ๋ฃ๊ณ ๋ ํฉ๋๋ค. ์๋ฅผ๋ค์ด material์์ฑ์ ๋ฐ๊พธ๊ณ material.needsUpdate = true, camera์์ฑ์ ๋ฐ๊พธ๊ณ camera.updateProjectionMatrix() ์ด๋ฐ ์ฝ๋๋ฅผ ๋ช ์์ ์ผ๋ก ์ถ๊ฐํด์ผํฉ๋๋ค. three.js๋ r3f๋ ๋ฒ์ ผ์ด ๊ณ์ ๊ฐฑ์ ๋๊ณ ์์ผ๋ ๋ ๊ฐ์ ๋ ์๋ ์์ ๊ฒ ๊ฐ์ต๋๋ค. ์์ธํ ๋ถ๋ถ์ ์๋ ๋ถ๋ถ์ ์ดํด๋ณด์๋ฉด ์ข์๊ฒ ๊ฐ์์. https://inf.run/DQQHK 2. ์ด์ง๋ฌธ์ ๋ํ ์ ์๊ฐ์ b.Geometry์ material๋ก ์ด๋ฃจ์ด์ง ํ๋์ ๋ฌผ์ฒด๊ฐ ์ข๋ ๋ง๋ ํํ์ธ๊ฒ ๊ฐ์ต๋๋ค. ๊ป๋ฐ๊ธฐ๋ผ๊ณ ํจ์ ์๋ฌด๋ฐ ๊ธฐ๋ฅ์ด ์๊ฒ ์ง๋ง mesh๋ geometry์ material์ด ํฉ์ณ์ง ํ๋์ ์ด๋ค ์ค์ฒด๊ฐ ์๋ ์ค๋ธ์ ํธ์ด๊ธฐ ๋๋ฌธ์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฐ์์์ ๋ฐ๋ณต์ ์ผ๋ก ์ค๋ช ๋๋ฆฌ๋ ๋ด์ฉ์ธ๋ฐ์, object3D๋ฅผ ๊ฐ์ฒด๊ฐ ์์ต๋๋ค. scene, camera, mesh, group๋ค obejct3D์ ๋๋ค. ๊ทธ๋์ 'mesh = ์ค๋ธ์ ํธ' ๋ผ๊ธฐ ๋ณด๋ค๋ ์ค๋ธ์ ํธ๊ฐ ์ข ๋ ํฐ ๊ฐ๋ ์ด๋ผ๊ณ ์๊ฐํ์๋ฉด ์ข์๊ฒ ๊ฐ์ต๋๋ค. ๋ต์ด ๋์๋์ง ๋ชจ๋ฅด๊ฒ ๋ค์. ๋ ์ถ๊ฐ์ ์ธ ๊ถ๊ธ์ฆ์ด๋ ์ง๋ฌธ์์ผ์๋ฉด ๋จ๊ฒจ์ฃผ์ธ์ ใ ใ ๊ฐ์ฌํฉ๋๋ค!
- 0
- 1
- 149
Q&A
zoom๊ณผ fov์ ์ฐจ์ด์ ์ด ์ ์ดํด๊ฐ ์๋ฉ๋๋ค.
์๋ ํ์ธ์, ์ฃผํ๋ ์ง๋ฌธ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.๊ฐ์ ์์์์๋ cameraHelper๋ฅผ ์ฌ์ฉํด์ ๋ณด์ฌ์ฃผ๊ธฐ ๋๋ฌธ์ fov์ zoom์ด ๋น์ทํ๊ฒ ๋์ํ๋ ๊ฒ์ฒ๋ผ ๋ณด์ฌ์ ํท๊ฐ๋ฆฌ์ค ์ ์์ ๊ฒ ๊ฐ์์. ๋๋ค ์นด๋ฉ๋ผ์ ํ๋ฌ์คํ (Frustum) ์์ญ์ ์กฐ์ ํ๊ธฐ ๋๋ฌธ์ cameraHelper์์๋ ๋น์ทํ๊ฒ ๋ณด์ผ ์ ์์ต๋๋ค. ํ์ง๋ง ์ค์ ๋ก ๋์ํ๊ณ ์ฌ์ฉํ๋๊ฒ์ ๋ค๋ฅธ๋ฐ์. ๋๋ถ๋ถ์ ์ค์ ํ๋ก์ ํธ์์๋ fov๋ ์ฒ์์ ์ธํ ํ๊ณ ๋ฐ๊พธ์ง ์์ต๋๋ค. ์นด๋ฉ๋ผ์ ์์ผ๊ฐ์ผ๋ก์ ์๊ทผ๊ฐ์ ๋ํ๋ด๋ ๊ฐ์ด์์. ๊ทธ๋์ ๊ฐ์ ๋๊ฒ ์ฃผ๋ฉด ํ๋ฉด์ด ์๊ณก๋์ด ๋ณด์ด๋ฏ๋ก ์ ๋นํ ๊ฐ(default 50)์ ์ฃผ๊ณ ํ๋ก์ ํธ๋ฅผ ์์ํ์๋ฉด ๋ฉ๋๋ค. ๋๋ถ๋ถ ํ๋ก์ ํธ์์๋ ์ ๊ฐ์ ์ค๊ฐ์ ๋ฐ๊พธ์ง ์์ต๋๋ค.zoom์ ์ฌ์ฉ์์ ์ก์ ์ ๋ฐ๋ผ ๋ฐ๊ฟ์๋ ์์ต๋๋ค. zoom ๊ฐ์ ๋ณ๊ฒฝํ๋ฉด ์นด๋ฉ๋ผ์ ์๊ทผ๊ฐ์ ๋ณํ์ง ์๊ณ ์นด๋ฉ๋ผ์ ๋ทฐ ํ๋/์ถ์๋ง ๋์ํ๊ธฐ๋๋ฌธ์ ์๊ณก๋์ง ์์ต๋๋ค. ๊ทธ๋์ ํ๋/์ถ์์์๋ fov๊ฐ ์๋ zoom์ ์ฌ์ฉํด์ ์ธํฐ๋ ์ ์ ๋ง์ด ํ ์ ์์ด์ ๋ค๋ฅธ ์ง๋ฌธ์์ผ์๋ฉด ํธํ๊ฒ ๋จ๊ฒจ์ฃผ์ธ์. ๊ฐ์ฌํฉ๋๋ค :)
- 1
- 2
- 272
Q&A
1๊ฐ ๊ด๋ จํ์ฌ ์๊ฒฌ์ ์ฌ์ญ๊ณ ์ถ์ ๊ฒ ์์ต๋๋ค.
์๋ ํ์ธ์. dbjoung๋ ์ง๋ฌธ์ฃผ์ ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.๊ต์ฅํ ๊ณ ์ฐจ์?์ ์ธ ์ง๋ฌธ์ด๋ผ์ ์ ๋ ์ข ์ฐพ์๋ดค๋๋ฐ์ ์ ๊ฐ ์ดํดํ ๋ด์ฉ๋ง ๊ฐ๋จํ ๋ต๋ณ๋๋ฆด๊ฒ์ ใ ใ Canvas์ 2D Context๋ณด๋ค 3D Context(WebGL)๊ฐ ๋ ๋น ๋ฅธ ์ด์ ์ผ๋จ web canvas๊ฐ 2d context -> webgl1 -> webgl2 -> webgpu ์ด๋ฐ์์ผ๋ก ๋ฐ์ ๋๊ณ ์๋๋ฐ ๋น์ฐํ ์ ์ ๊ธฐ๋ฅ๊ณผ ์ฑ๋ฅ์ด ๊ฐ์ ๋๊ณ ์๋ค๊ณ ์๊ฐํ์๋ฉด ํธํ ๊ฒ ๊ฐ์ต๋๋ค. ์ง๋ฌธ์ฃผ์ ๊ฒ ์ฒ๋ผ 2D Context๋ ๋๋ถ๋ถ CPU๋ฅผ ์ฌ์ฉํ์ง๋ง ๋ธ๋ผ์ฐ์ ธ์ ๋ฐ๋ผ GPU๋ฅผ ์ฌ์ฉํ์ฌ ๋ ๋๋ง ํ๋ ๊ฒฝ์ฐ๋ ์์ต๋๋ค. ํ์ง๋ง Direct2D๋ OpenGL๊ฐ์ ์ฝ๋๋ฅผ ๋ฐ๋ก ์ถ์ํ ์์ผ์ ๊ฐ์ ธ๋ค๊ฐ ์ฌ์ฉํ๊ธฐ๋๋ฌธ์(๊ทธ๋ฅ OpenGL์ฝ๋๋ฅผ ํธ์ถํ๋ ๋ฐฉ์) ๊ทธ ๊ณผ์ ์์ ์ฑ๋ฅ์ด ๋จ์ด์ง๋๋ค. ๋ฐ๋ฉด, WebGL์ OpenGL ES๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ๋ coreํ ์ ์์ค API๋ฅผ ์ฌ์ฉํ๊ธฐ๋๋ฌธ์ ๋ถํ์ํ ์ถ์ํ๋ฅผ ํ์ง ์์ ์ ์๊ณ , webgl์ ์์ด๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ ๋๋ง์ ์ ์ดํ ์ ์๊ธฐ ๋๋ฌธ์ ์ฑ๋ฅ์ ์ต๋ํ ๋ฐํํ๋ ๊ฒ์ผ๋ก ์๊ณ ์์ต๋๋ค. ๋ฐ๋ผ์ ์ง๋ฌธ์ฃผ์ 2๊ฐ์ง ์ค์๋ 'WebGL์ ์ ฐ์ด๋๋ฅผ GPU์์ ์คํ์ํค๊ธฐ ๋๋ฌธ์ 2D Context๋ณด๋ค CPU ์ฒ๋ฆฌ๋์ด ์ ๋ค.'์ด ์ ํํ ๋ง๋๊ฒ ๊ฐ์ต๋๋ค. ์๋ง์ ๊ฐ์ฒด๋ฅผ ์ ๋๋ฉ์ด์ ํ ๋ ๋ ์ ํฉํ ์ชฝ : WebGL API vs DOM(or SVG) + transform ์์ฑ์ง๋ฌธ ์ฃผ์ ๊ฒ์ฒ๋ผ transform๋ reflow๋จ๊ณ๋ฅผ ํ์ง ์๊ณ GPU๊ฐ์์ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ๋น ๋ฅด๊ฒ ์ฒ๋ฆฌ๊ฐ ๋ฉ๋๋ค. ๊ฐ๋จํ UI ์ ๋๋ฉ์ด์ ์ transform, opacity๋ฑ ์์ฑ์ผ๋ก ์ฌ์ฉํด์ css animation์ ํ๋๊ฒ์ด ํธํ๊ณ ๋น ๋ฆ ๋๋ค. ์ ๋ ์ผ๋ฐ์ ์ธ ์น์ ํ ๋๋ css๋ฅผ ์ฌ์ฉํด์ ์์น, ํฌ๊ธฐ, ํ์ ๋ฑ ์ ๋๋ฉ์ด์ ์ ์ฃผ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ํ์ง๋ง ์์ฒ๊ฐ์ ์ค๋ธ์ ํธ์ ์ ๋๋ฉ์ด์ ์ด๊ฑฐ๋ ํ ์ค์ณ๋ ํ๋ คํ ๊ทธ๋ํฝ์ด ํ์ํ๋ค๋ฉด ๋น์ฐํ WebGL์ด ๋น ๋ฅด๊ณ ํจ์จ์ ์ ๋๋ค. ๊ฐ์ ์ค ๋ณด์ฌ์ฃผ์ ์๋ ๊ทธ๋ฆผ์์, SVG์ ์ฌ๊ฐํ๊ณผ ํ ์คํธ๋ง ํ ๋๋ฆฌ๊ฐ ์ข ํ๋ฆฌ๊ฒ ๋ณด์ด๊ณ ์๋๋ฐ ์ด๋ฐ ํ์์ด ์ ๋ฐ์ํ๋๊ฑธ๊น์? ์ด๋ก ์ ์ผ๋ก๋ SVG๊ฐ ๊ฐ์ฅ ๊น๋ํด์ผํ ๊ฒ ๊ฐ์๋ฐ ํฝ์ ์ด ๊นจ์ง ์ ๋๋ก ํ๋ํ์ง ์๋ ์ด์์ SVG ์ชฝ์ด ๋ ํ๋ฆฟํ๊ฒ ๋ณด์ด๋ ๊ฒ ๊ฐ์ ์ฌ์ญค๋ด ๋๋ค.svg, canvas ๋ชจ๋ ๋ชจ๋ํฐ์ ํ์๋ ๋๋ ํฝ์ ๋ก ํ์๋๊ธฐ๋๋ฌธ์ ๋์คํฐ๋ผ์ด์ง๋์ด์ผ ํฉ๋๋ค. ๋ฒกํฐ๊ฐ ํฝ์ ๋ก ๋ณํ๋๋ ๊ฑฐ์ฃ . ๊ทธ ๊ณผ์ ์์ ์ํฐ์จ๋ฆฌ์ด์ฑ์ด ์ ๋๋ก ์๋๋ฉด ๊นจ์ ธ๋ณด์ผ ์ ์์ต๋๋ค. svg์ viewBox์ ๋ฐ๋ผ rect์ x,y, width, height๊ฐ ๊ณ์ฐ๋๋๋ฐ ๊ทธ ๊ฐ์ด ์์์ ์ผ๋ก ๊ณ์ฐ๋๋ฒ๋ฆฌ๋ฉด ํฝ์ ์ ๋ ฌ์ด ๊นจ์ ธ๋ฒ๋ฆฌ๊ฒ ๋์ ๊ทธ๋ฐ๊ฒ ๊ฐ์ต๋๋ค. box-wrap์ด width๊ฐ 33.3%์ด๊ณ ๊ฑฐ๊ธฐ์ rect์ x,y๋ฅผ 40%๋ก ํด๋ฒ๋ ค์ ์์์ ์ด ๋์ค๊ธฐ ๋๋ฌธ์ ํด๋น ๊ฐ๋ค์ px๋จ์๋ก ๋ฐ๊พธ๋ฉด ๊นจ์ง๋ ๋ฌธ์ ๊ฐ ๋ ํด์ง๋๋ค ใ ใ ๋ต๋ณ์ด ๋์ จ๋์ง ๋ชจ๋ฅด๊ฒ ๋ค์ ๊ฐ์ ๋ค์ผ์๋ฉด์ ๋ ์ง๋ฌธ์ฃผ์๋ฉด ๊ฐ์ด ๊ณ ๋ฏผํด๋ณด๊ฒ ์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค!
- 0
- 1
- 127
Q&A
'JSX.IntrinsicElements' ์ ํ์ 'mesh' ์์ฑ์ด ์์ต๋๋ค. ๊ฒฝ๊ณ ํด๊ฒฐ๋ฒ
์๋ ํ์ธ์. ์๋ก๋. ๋จผ์ ์น์ ํ๊ฒ ๊ณต์ ํด์ฃผ์ ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.Typescript์ drei ์ค์น์์๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋๊ตฐ์.type๋ react 18๋ฒ์ ผ์ผ๋ก ๋ฎ์ถ๊ณ three-mesh-bvh๋ ๋ณ๊ฒฝํ๋ ๋ฒ์ ์๋ ค์ฃผ์ ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.๊ฐ์๋ฅผ ์ ๋ฐ์ดํธํ ๋ ์ฐธ๊ณ ํด์ ํ ์คํธํ๊ณ ์ ๋ฐ์ดํธ ํ๊ฒ ์ต๋๋ค. ๊ฐ์๋ค์ผ์๋ฉด์ ์งํ ํด๋ณด์๋ค๊ฐ ์๋๋ ๋ถ๋ถ ์์ผ์๋ฉด ์๋ ค์ฃผ์ธ์. ๊ฐ์ฌํฉ๋๋ค :)
- 1
- 2
- 306
Q&A
onClick ์ด๋ฒคํธํจ์๋ก raycaster ๋ฐฉํฅ์ด ์๋์ผ๋ก set๋๋์?
์๋ ํ์ธ์. grs0412๋์ฝ๋ฉ์์ธ๊ณ ํํ์ฌ์ ๋๋ค.์ธํ๋ฐ AI ์ธํด์ด ๋ต๋ณํ๋ฏ์ด r3f์์ useThree๋ก ๊ฐ์ ธ์จ raycaster๋ ์๋์ผ๋ก ํ์ฌ ๋ง์ฐ์ค ํฌ์ธํธ๋ฅผ ๊ฐ์งํ๋๋ก ์ค์ ๋์ด์์ต๋๋ค. raycaster๋๋ฅผ useThree์์ ๋ถ๋ฌ์ค๊ฒ๋๋ฉด ํ์ฌ ๋ง์ฐ์คํฌ์ธํธ์ ์นด๋ฉ๋ผ๋ฅผ ์ค์ ํ ์ ์๋ setFromCamera๊ฐ ์ด๋ฏธ ์ค์ ๋์ด ์์ต๋๋ค.raycaster.setFromCamera( ํ์ฌ๋ง์ฐ์คํฌ์ธํธ, ํ์ฌ์นด๋ฉ๋ผ )https://threejs.org/docs/#api/en/core/Raycaster.setFromCamera ( R3F๊ฐ ์๋๋ผ three.js๋ง ์ฌ์ฉํ์๋ฉด ์๋ url์ ์์์ฒ๋ผ ์ง์ setFromCamera๋ฅผ ํธ์ถํ์ ์ผํฉ๋๋ค. https://threejs.org/docs/#api/en/core/Raycaster )๊ทธ๋ฆฌ๊ณ ํน์ ํฌ์ธํธ์ ๋ํ raycast๋ฅผ ํ๊ณ ์ถ๊ฑฐ๋, ๋ค๋ฅธ ์นด๋ฉ๋ผ ๋ทฐ์ ๋ํ raycast๋ฅผ ํ๊ณ ์ถ์ผ๋ฉด์๋์ฒ๋ผ intersectObject๋ฅผ ํธ์ถํ๊ธฐ์ ์ ์ค์ ์ ๋ณ๊ฒฝํ ์ ๋ ์์ต๋๋ค. const crntPointer = new THREE.Vector2(point.x, point.y); raycaster.setFromCamera(crntPointer, camera); const intersects = raycaster.intersectObjects(gltf.scene.children); ์์ฝํ์๋ฉด ํ์ฌ ๋ง์ฐ์คํฌ์ธํธ์, ํ์ฌ ์นด๋ฉ๋ผ๋ฅผ ์ฌ์ฉํด์ raycaster๋ฅผ ์ฌ์ฉํ๋ค๋ฉดsetFromCamera๋ฅผ ๋ฐ๋ก ์ค์ ํ์ง ์๊ณ ๋ฐ๋ก intersectObject๋ฅผ ์ฌ์ฉํ์ ๋ฉ๋๋ค.๋ค๋ฅธ ์ง๋ฌธ ์์ผ์๋ฉด ํธํ๊ฒ ๋จ๊ฒจ์ฃผ์ธ์. ๊ฐ์ฌํฉ๋๋ค !
- 0
- 2
- 174
Q&A
๋ฌธ์ ํด๊ฒฐํ์ต๋๋ค.
์๋ ํ์ธ์! ์ด๋ช ์ฌTV๋ ํด๊ฒฐํ์ จ๋ค๋ ๋คํ์ ๋๋ค ใ ใ alias๋ฅผ ์ค์ ํด๋๋ฉด ํ๋ก์ ํธ์์ ์ฐธ ํธํ์ฃ !ChatGPT๋ ์ญ์ ์ธ๊ฐ๋ณด๋ค ๋น ๋ฅด๊ณ ์ ํํ๊ตฐ์ ใ ใ ์ ๋ ChatGP๋ฅผ ์์ฃผ ์ฐ๊ณ ์๋๋ฐ์. ๊ฐ๋ ์ ์ดํดํ์๋ฉด์ ChatGPT์ ๊ฐ์ด ๊ณต๋ถํ์๋ฉด ํจ์ฌ ๋ฅ๋ฅ ์ด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค! ๋ค๋ฅธ ์ง๋ฌธ ์์ผ์๋ฉด ์๋ ค์ฃผ์ธ์! ๊ฐ์ฌํฉ๋๋ค!
- 0
- 1
- 178




