Three.js๋ก ์์ํ๋ 3D ์ธํฐ๋ํฐ๋ธ ์น
์น์์ 3D๋ฅผ ๊ตฌํํ ์ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, three.js์ ํต์ฌ ๊ฐ๋ ๋ค์ ์ตํ๊ณ ์์ฉ ์์ ๊น์ง ๋ง๋ค์ด ๋ณด๋ฉด์ 3D ์น ๊ฐ๋ฐ์ ๋ํ ๊ฐ์ ์ตํ๋ด ๋๋ค.
์๊ฐ์ 1,891๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ

- ๋ฏธํด๊ฒฐ
box3.position.x ์์น
box3 position์ด box2๊ฐ ์๋๋ผ box1 ๊ธฐ์ค x์ถ๋งํผ ์ด๋์ด ๋ฉ๋๋ค ใ ใ ๋ญ๊ฐ ์์ธ๊ฑด์ง ์ฝ๋์ ๊ฐ์๋ฅผ ๋ช ๋ฒ์ ํ์ธํด
์ธํฐ๋ํฐ๋ธ-์นthree.jshyeonkyeong
ใป
13์ผ ์
0
28
1
- ๋ฏธํด๊ฒฐ
๋ฆฌ์กํธ/next.js์ ๊ฐ์ด ์ฌ์ฉํ๋ ๊ฐ์ ๊ณํ์ ์์ผ์ ๊ฐ์?
๊ฐ์ ์ ๋ฃ๊ณ ์์ต๋๋ค!ํน์ ๋ฆฌ์กํธ/next.js์ ๊ฐ์ด ์ฌ์ฉํ๋ ๊ฐ์ ๊ณํ์ ์์ผ์ ๊ฐ์?
blender์ธํฐ๋ํฐ๋ธ-์นthree.jsblueberryu
ใป
5๋ฌ ์
0
61
1
- ๋ฏธํด๊ฒฐ
์์ค์ฝ๋ ํ์ผ์ด ๊ฐ์๋ ๊ฐ๋์?
01_CDN ์ด๋ผ๋ ํด๋๊ฐ ์์ค์ฝ๋ ๋ค์ด๋ก๋ ๋ฐ์์ ๋ ์๋ฌด๋ฆฌ ์ฐพ์๋ ์์ต๋๋ค..
blender์ธํฐ๋ํฐ๋ธ-์นthree.js์ด์ฌ์ธ ์ฐธ์
ใป
9๋ฌ ์
0
103
2
- ๋ฏธํด๊ฒฐ
materials ๋ฐฐ์ด์ ์๋ top, bottom ... ๋ค์ ๋ํด์
Box ์ง์ค๋ฉํธ๋ฆฌ๋ฅผ ์ด์ฉํ์๊ธฐ ๋๋ฌธ์ ์ ์ก๋ฉด์ฒด์ธ๋ฐ, materials ๋ฐฐ์ด์ ์๋ ์ฌ์ฏ๊ฐ์ ์์๋ค ์์๊ฐ ์ ํด์ ธ ์๋๊ฑธ๊น์?์๋์ผ๋ก frontTexture๊ฐ ์์
blender์ธํฐ๋ํฐ๋ธ-์นthree.js์ค๊ท
ใป
์ผ ๋ ์
0
109
0
- ๋ฏธํด๊ฒฐ
gltf ํฌ๋งท ์ฌ์ฉ
์๋ ํ์ธ์ ๊ฐ์ ๋๋ฌด ์๋ณด๊ณ ์์ต๋๋ค.<a target="_blank" rel="noopener noreferrer nofollow" href="https://in
blender์ธํฐ๋ํฐ๋ธ-์นthree.js๊น์ํธ
ใป
์ผ ๋ ์
0
220
1
- ๋ฏธํด๊ฒฐ
์ ํ ์ ๋๋ฉ์ด์ stop
normal ์ ๋ฆฌํ์ ํด๋ฆญํ์ ๋, actions[0] ๋ฅผ stopํด์ default ๋ชจ์ ์ ์ญ์ ๋ฅผ ํ์ง๋ง ์ ํ ๋ชจ์ ์ ๊ณ์ ํ๋๋ผ๊ตฌ์. <img src="https://cdn.inflear
blender์ธํฐ๋ํฐ๋ธ-์นthree.js์ค๊ท
ใป
์ผ ๋ ์
0
110
2
- ๋ฏธํด๊ฒฐ
์ฌ์์ ๋ฐ๋ฅธ ๋ค๋ฅธ ๊ฒฐ๊ณผ
๊ฐ์์์ ์ฌ์ฉํ์ ์ปดํจํฐ๋ ์ ํ์ฌ ๋งฅ๋ถ์ด์ ๊ฑฐ ๊ฐ์๋ฐ ์ ๋ ์๋์ฐ๋ก ์ค์ตํ์ต๋๋ค. ๊ทธ๋์์ธ์ง ์ฌ์ค ๊ธฐ๋ฅ ์ธ์ฐ๊ณ ๋ฐ ์ค์นํ๊ณ ๋ถํฐ ์ฌ์ฌ ๋ ์ด ์ฌํ
blender์ธํฐ๋ํฐ๋ธ-์นthree.js์ค๊ท
ใป
์ผ ๋ ์
0
100
1
- ๋ฏธํด๊ฒฐ
์ค๋ณต ์ง๋ฌธ ์ญ์
๋น์ทํ ์ง๋ฌธ ๋ต๋ณ ์ฌ๋ผ์จ ๊ฒ ์๋ค์
blender์ธํฐ๋ํฐ๋ธ-์นthree.js์์ฑ์ ์์
ใป
์ผ ๋ ์
0
149
1
- ๋ฏธํด๊ฒฐ
ํน์ ์ด ๋น์ ๋ฒ์๋ฅผ ์กฐ์ ํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์๋์?
<img src="https://cdn.inflearn.com/public/files/posts/3aead7ec-7603-4def-9499-82f8930d80ea/2a2ed9c7-7978-477e-983b-10efef5e13b6.png" media-type="img"
blender์ธํฐ๋ํฐ๋ธ-์นthree.js์ค๊ท
ใป
์ผ ๋ ์
0
109
1
- ๋ฏธํด๊ฒฐ
gltf.scene.children ์ด ์๋๋ฐ๋ ๋ชจ๋ธ์ด ํ๋ฉด์ ๋ ์
<img src="https://cdn.inflearn.com/public/files/posts/ba01f214-7828-43bc-b451-363a750594cc/b6deb72c-e6c6-40e6-9c6b-9071dd63bcf8.png" media-type="img"
blender์ธํฐ๋ํฐ๋ธ-์นthree.js์ค๊ท
ใป
0
92
2
- ๋ฏธํด๊ฒฐ
GLFํ์ผ exportํ ํ์ three.js์์ ๋ ๋๋ง ๋ ๋ชจ๋ธ์๋ ํ ์ค์ฒ ์ ์ฉ์ด ์๋์ด์์ต๋๋ค..!
๋ธ๋ ๋์์๋ ํ ์ค์ฒ๊ฐ ์ ์ฉ๋๊ฑธ๋ก ๋ณด์ด๋๋ฐ, exportํ ํ์ three.js์์ ๋ ๋๋ง ํ๋ฉด ํ ์ค์ฒ๊ฐ ์ ์ฉ๋์ง ์์ ๋ชจ๋ธ๋ก ๋ณด์ ๋๋ค ใ ใ ์ ๊ณต๋ ilbuni.glb ํ์ผ์ ์ฌ์ฉํ๋ฉด ๋ฌธ์ ๊ฐ ์๋๊ฑธ๋ก ๋ณด์ ์ฝ๋ ๋ฌธ์ ๋ ์๋๊ณ , ๋ธ๋ ๋์์ ๋ญ๊ฐ ์๋ชป๋๊ฑฐ
blender์ธํฐ๋ํฐ๋ธ-์นthree.js๊นํ๋น
ใป
0
137
1
- ๋ฏธํด๊ฒฐ
์ผ๋ฐ ์ ๋ฆฌ, ๊ฐํ ์ ๋ฆฌ ๊ฐ์์์ Glass ๊ฐ์ฒด์ position X๋ฅผ -1, 1๋ก ์ค์ ํ ์ด์ ๋ฅผ ๋ชจ๋ฅด๊ฒ ์ด์
๊ฐ Glass ๊ฐ์ฒด์ position X ๊ฐ์ -1, 1๋ก ์ค์ ํ์ จ๋๋ฐ, ์ด๋ค ๊ณ์ฐ์ด ๋ค์ด๊ฐ๊ฑธ๊น์? ์๋๋ฉด ๊ฐ์ ๋ฃ์ด๋ณด๋ฉด์ ๋ง์ถ๋๊ฑด๊ฐ์? // ์ ๋ฆฌํ for (let i = 0; i < numberOfGlass
blender์ธํฐ๋ํฐ๋ธ-์นthree.js๊นํ๋น
ใป
0
69
0
- ๋ฏธํด๊ฒฐ
๊ทธ๋ฆผ์๊ฐ ๋ค๋ฅด๊ฒ ํํ๋ฉ๋๋ค
๊ฐ์ ์ฝ๋๋ฅผ ๊ทธ๋๋ก ๋ฐ๋ผํ๋ฉด mesh ์์ด ์ด๋์ด ํ์์ผ๋ก ํํ๋๊ณ ๊ทธ๋ฆผ์๊ฐ ์๊ธฐ์ง ์๋ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ๊ทธ๋์ SpotLight์ ์์น์ ๊ฐ๋๋ฅผ ์กฐ์ ํ๋๋ ๊ทธ๋ฆผ์๋ ๋ํ๋๋๋ฐ ๊ฐ์์์์ฒ๋ผ ๋ชจ๋ ์ง์๋ํ ๊ทธ๋ฆผ์๊ฐ ๋์ผํ๊ฒ ๋์ค๋
blender์ธํฐ๋ํฐ๋ธ-์นthree.js๊นํ๋น
ใป
0
125
1
- ๋ฏธํด๊ฒฐ
setAnimationLoop ์์น๊ฐ...
ํ์ฌ ์ ๋๋ฉ์ด์ ๊ธฐ๋ณธ ์์ ๋ถํฐ scale๊น์ง ๋ดค๋๋ฐ,setAnimationLoop ๊ฐ draw ์์ ๋ฑ๋ก๋์ ๋งค๋ฒ ๋ฐ๋ณต์ผ๋ก ์คํ๋๋๊ฒ ๊ฐ์๋ฐ,ํ๋ฉด๊ฐฑ์ ์ ๊ด๋ จ๋ render๋ง ๋ฐ๋ณต์ํค๊ณ setAnimationLoop๋ ๋ฐ๊นฅ์์ ํ
blender์ธํฐ๋ํฐ๋ธ-์นthree.jsaska120
ใป
0
89
1
- ๋ฏธํด๊ฒฐ
์ผ๊ตด ๊ทธ๋ฆด ๋ ๋ถ์ด ๊น๋ํ๊ฒ ์น ํด์ง์ง ์๊ณ ์ผ๋ฃฉ๋๋ฃฉํด์
<img src="https://cdn.inflearn.com/public/files/posts/b5853395-0041-484e-b499-90b2dc8ae552/22f9229e-cab8-41a1-aa99-6592722cb948.png" media-type="img"
blender์ธํฐ๋ํฐ๋ธ-์นthree.js๊นํ๋น
ใป
0
118
1
- ๋ฏธํด๊ฒฐ
๋ธ๋ ๋ texture paint ์ ๋ฏธ๋ฌ๋ชจ๋
<img src="https://cdn.inflearn.com/public/files/posts/ba92feff-c4ee-4c42-ab67-a73efe8570a2/e5e87bfe-f1dd-410a-a9dc-0ab3569c4260.png" media-type="img"
blender์ธํฐ๋ํฐ๋ธ-์นthree.js๊นํ๋น
ใป
0
147
0
- ๋ฏธํด๊ฒฐ
DragControls์ ์ธ์๊ฐ์ ๋ฐ๊พธ์ง ์์๋๋ฐ ์๋ฌ๊ฐ ์๋ ์!
DragControls 1:05์ด์ ์ธ์๋ฅผ ๋ฐ๊พธ์ง ์์ผ๋ฉด ์๋ฌ๊ฐ ๋์ผํ๋๋ฐ, ์ ๋ ์๋ฌ๊ฐ ์๋จ๋๋ฐ ์ด์ ๊ฐ ๋ญ๊น์??์๋ฒ๋ ๊ป๋ค๊ฐ ๋ค์ ์ผ๋ ๋์๋ง ์๋ ๋ฟ์ด๊ณ , ์๋ฌ๋ ์๋ฉ๋๋ค!<code class="language-javascrip
blender์ธํฐ๋ํฐ๋ธ-์นthree.js๊นํ๋น
ใป
0
97
1
- ๋ฏธํด๊ฒฐ
blender ์์ ์์น ํ๊ธฐ ํธ Texter paint slot์ถ๊ฐ์์
blender ์์น ํ๊ธฐ ํธ์ ๋ณด๊ณ ์์ ์ ์งํ์ค ์ ๋๋ค. ์์์์๋ Texture Paint๋ฅผ ๋๋ฅด๋ฉด mesh๊ฐ๋ณด๋ผ์์ด ๋๋ค๊ณ ๋์ค๋ฉฐ ์ดํ ์ค๋ฅธ์ชฝ ์ฐฝ์ ํ๋ฌ์ค ๋ฒํผ์ ๋๋ฌ์ Texture Paint Slot์ ์ถ๊ฐํ๋ ์ฅ๋ฉด์ด ๋์ค์ง๋ง ์ ์ ๊ฒฝ์ฐ ์บ๋ฆญํฐ๊ฐ ๋ณด๋ผ์์ผ๋ก
blender์ธํฐ๋ํฐ๋ธ-์นthree.js์์ฑ์ ์์
ใป
0
894
2
- ๋ฏธํด๊ฒฐ
fin ๋ฒ์ ๋ ๊ทธ๋ฅ ์คํ์ด ์๋ผ์
์๊พธ ํ๋ค๊ฐ ์ค๋ฅ๋ฉ์ธ์ง๋ ์๋จ๋๋ฐ ํน์๋ ์ถ์ด์ fin๋ฒ์ ๋ ์คํํด๋ดค๋๋ฐ ์๋ฌด๊ฒ๋ ์๋จ๊ณ ๊ทธ๋ฅ ํฐ์ ๋ฐฐ๊ฒฝ๋ง ๋จ๋ค์. ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์ค์น๋์ง ์์๋ค๊ณ ํ๊ธฐ์ ๋ค๋ฅธ ๊ฐ์๋ก ์คํํ three.js๋ ์คํ์ด ๋์๋๋ฐ....
blender์ธํฐ๋ํฐ๋ธ-์นthree.jsznah1231
ใป
0
269
2
- ๋ฏธํด๊ฒฐ
์๋ฐ์คํฌ๋ฆฝํธ ์คํ์ด ์๋๋ ๊ฒ ๊ฐ์์
<img src="https://cdn.inflearn.com/public/files/posts/1989b0b2-bf61-4427-a5f9-4eca1181381e/Document-Chrome2024-07-04รฌยยครญยย3_37_001.png" media-type="im
blender์ธํฐ๋ํฐ๋ธ-์นthree.jsznah1231
ใป
0
351
1






