undefined

'๐ŸŒฟ ์Šคํ„ฐ๋””'์— ํ•ด๋‹น๋˜๋Š” ๊ธ€ 21๊ฑด

  1. [ํด๋ฆฐ์ฝ”๋“œ] 2์žฅ ์˜๋ฏธ์žˆ๋Š” ์ด๋ฆ„ with Typescript

    ์ข‹์€ ์ด๋ฆ„์œผ๋กœ ์ ˆ์•ฝํ•˜๋Š” ์‹œ๊ฐ„์€ ์ข‹์€ ์ด๋ฆ„์„ ์ง“๊ธฐ ์œ„ํ•ด ๊ณ ๋ฏผํ•˜๋Š” ์‹œ๊ฐ„๋ณด๋‹ค ํ›จ์”ฌ ๋” ํฌ๋‹ค. ์ด ์žฅ์—์„œ๋Š” ์ด๋ฆ„์„ ์ž˜ ์ง“๋Š” ๊ฐ„๋‹จํ•œ ๊ทœ์น™์„ ๋ช‡ ๊ฐ€์ง€ ์†Œ๊ฐœํ•œ๋‹ค. ์˜๋„๋ฅผ ๋ถ„๋ช…ํžˆ ๋ฐํ˜€๋ผ ์˜๋„๊ฐ€ ๋“ค์–ด๋‚˜๋Š” ์ด๋ฆ„์€ ์ฝ”๋“œ ์ดํ•ด์™€ ๋ณ€๊ฒฝ์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ ๋‹ค. ๋”ฐ๋กœ ์ฃผ์„์ด ํ•„์š”ํ•˜๋‹ค๋ฉด ์˜๋„๊ฐ€ ๋ถ„๋ช…ํ•˜์ง€ ์•Š๋‹ค๋Š” ์˜๋ฏธ๋‹ค. ์ด๋ฆ„์„ ์ง“๊ธฐ ์œ„ํ•ด ๋‹ค์Œ ์งˆ๋ฌธ์— ๋ชจ๋‘ ๋‹ตํ•ด์•ผ ํ•œ๋‹ค. ๋ณ€์ˆ˜ ๋˜๋Š” ํ•จ์ˆ˜, ํด๋ž˜์Šค์˜ ์กด์žฌ ์ด์œ ๋Š”? ์ˆ˜ํ–‰ํ•˜๋Š” ๊ธฐ๋Šฅ์€? ์‚ฌ์šฉ ๋ฐฉ๋ฒ•? ์˜ˆ์‹œ // ๐Ÿ”ด Bad const getTheme = (theList: number[][]) => { const list1: number[][] = [[]]; theList.forEach((x) => { if (x[0] === 4) { list1.push(x); } }); return list1; }; ์ด ..

  2. [three.js] ๊ธฐ๋ณธ ๊ตฌ์„ฑ ์š”์†Œ - ํšŒ์ „ํ•˜๋Š” ํŒŒ๋ž€์ƒ‰ ์ •์œก๋ฉด์ฒด ๋ Œ๋”๋งํ•˜๊ธฐ

    GIS ๊ฐ•์˜ 1๊ฐ• ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์„ฑ & 2๊ฐ• ๊ธฐ๋ณธ ๊ตฌ์„ฑ ์š”์†Œ์™€ ์ฝ”๋“œ three.js์˜ ๊ธฐ๋ณธ ๊ตฌ์„ฑ ์š”์†Œ Renderer Scene์„ ํ™”๋ฉด์— ์ถœ๋ ฅํ•ด์ฃผ๋Š” ๋ Œ๋”๋Ÿฌ Scene 3์ฐจ์› ๊ฐ์ฒด๋กœ ๊ตฌ์„ฑ๋˜๋Š” ์žฅ๋ฉด. Light์™€ Mesh๋กœ ๊ตฌ์„ฑ๋จ Light 3์ฐจ์› ํ˜•์ƒ์ด ํ™”๋ฉด ์ƒ์— ํ‘œ์‹œ๋˜๊ธฐ ์œ„ํ•œ ๊ด‘์› Mesh Object3D์˜ ํŒŒ์ƒ ํด๋ž˜์Šค. Geometry์™€ Material๋กœ ๊ตฌ์„ฑ Geometry: ํ˜•์ƒ์„ ์ •์˜ Material: ์ƒ‰์ƒ ๋ฐ ํˆฌ๋ช…๋„ ๋“ฑ์„ ์ •์˜ Camera Scene์„ ๋ฐ”๋ผ๋ณด๋Š” ์‹œ์ . 3์ฐจ์›์˜ Scene์€ ์–ด๋Š ์‹œ์ ์—์„œ ๋ฐ”๋ผ๋ณด๋Š๋ƒ์— ๋”ฐ๋ผ ๋‹ค๋ฅด๊ฒŒ ๋ณด์ž„. Camera๋กœ ์ด ์‹œ์ ์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค. PRACTICE: ํšŒ์ „ํ•˜๋Š” ํŒŒ๋ž€์ƒ‰ ์ •์œก๋ฉด์ฒด ๋ Œ๋”๋งํ•˜๊ธฐ id๊ฐ€ webgl-container์ธ div element ์•ˆ์— 3์ฐจ..

  3. [ํด๋ฆฐ์ฝ”๋“œ] 1์žฅ ๊นจ๋—ํ•œ ์ฝ”๋“œ๋ž€ ๋ฌด์—‡์ธ๊ฐ€์™€ ๊ฐœ๋ฐœ์ž์˜ ์ฑ…์ž„๊ณผ ์˜๋ฌด

    1์žฅ. ๊นจ๋—ํ•œ ์ฝ”๋“œ ์ฝ”๋“œ๊ฐ€ ์กด์žฌํ•˜๋ฆฌ๋ผ ์ฝ”๋“œ์˜ ์ค‘์š”์„ฑ๊ณผ ์—ญํ• ์„ ๊ฐ•์กฐํ•œ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋ž€, ๊ธฐ๊ณ„๊ฐ€ ์‹คํ–‰ํ•  ์ •๋„๋กœ ์ƒ์„ธํ•˜๊ฒŒ ์š”๊ตฌ์‚ฌํ•ญ์„ ๋ช…์‹œํ•˜๋Š” ์ž‘์—… ์ฝ”๋“œ๋ž€, ํ”„๋กœ๊ทธ๋ž˜๋ฐ์œผ๋กœ ์š”๊ตฌ์‚ฌํ•ญ์„ ๋ช…์‹œํ•œ ๊ฒฐ๊ณผ ๊ถ๊ทน์ ์œผ๋กœ ์ฝ”๋“œ๋Š” ์š”๊ตฌ์‚ฌํ•ญ์„ ํ‘œํ˜„ํ•˜๋Š” ์–ธ์–ด ๋‚˜์œ ์ฝ”๋“œ ๋‚˜์œ ์ฝ”๋“œ, ์ฆ‰ ๊นจ๋—ํ•˜๊ฒŒ ์ •๋ฆฌ๋˜์ง€ ๋ชปํ•œ ์ฝ”๋“œ์˜ ์˜ํ–ฅ์„ ๊ธฐ์ˆ ํ•œ๋‹ค. ์ด ํŒŒํŠธ๋ฅผ ์ฝ์œผ๋ฉด์„œ ๊ต‰์žฅํžˆ ๊ณต๊ฐ์ด ๊ฐ”๋‹ค. ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๋ˆ„๊ตฌ๋‚˜ ํ•œ ๋ฒˆ์”ฉ ๋Š๊ปด๋ดค์„ ๊ณ ํ–‰์„ ํ†ตํ•ด ์™œ ํด๋ฆฐ ์ฝ”๋“œ๊ฐ€ ์ค‘์š”ํ•œ ์ง€ ํ•œ ๋ฒˆ ๋” ๊ฐ•์กฐํ•œ๋‹ค. ๋‚˜์ค‘์€ ๊ฒฐ์ฝ” ์˜ค์ง€ ์•Š๋Š”๋‹ค ์‹œ๊ฐ„์— ์ซ“๊ธฐ๋‹ค๋ณด๋ฉด ‘์ผ๋‹จ ๋™์ž‘๋งŒ ํ•˜๋„๋ก ์งœ๊ณ , ์ฝ”๋“œ๋Š” ๋‚˜์ค‘์— ์ •๋ฆฌํ•˜์ž’๋ผ๋Š” ์œ ํ˜น์— ๋น ์งˆ ๋•Œ๊ฐ€ ์žˆ๋‹ค. ์ €์ž๋Š” ๋ฅด๋ธ”๋ž‘์˜ ๋ฒ•์น™์— ๋น—๋Œ€์–ด ์ด๋ฅผ ๋‚ ์นด๋กญ๊ฒŒ ๊ผฌ์ง‘๋Š”๋‹ค. ๊ฒฐ๊ตญ ํด๋ฆฐํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์›์น™์„ ๊นŠ์ด ์ƒˆ๊ฒจ๋†“๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค. ๋‚˜์œ ์ฝ”๋“œ๋Š” ํŒ€์˜ ์ƒ..

  4. [ํด๋ฆฐ์ฝ”๋“œ] ์„œ๋ก : ํด๋ฆฐ์ฝ”๋“œ ์Šคํ„ฐ๋””๋ฅผ ์‹œ์ž‘ํ•˜๋ฉฐ

    ์ƒˆ ์ฑ…์„ ํŽผ์น˜๋Š” ์ˆœ๊ฐ„์€ ์–ธ์ œ๋‚˜ ์„ค๋ Œ๋‹ค. ์˜ค๋Š˜์€ ๊ฐœ๋ฐœ์ž์˜ ๋ฐ”์ด๋ธ” ๊ฐ™์€ ์ฑ…, ํด๋ฆฐ์ฝ”๋“œ๋ฅผ ํŽผ์น˜๋Š” ๋‚ . ๋‚ด๊ฐ€ ๊ฐ€์žฅ ์ข‹์•„ํ•˜๊ณ , ๋˜ ๊ฐ€์žฅ ์ค‘์š”ํ•˜๊ฒŒ ์ƒ๊ฐํ•˜๋Š” ํŒŒํŠธ๋Š” ๋ฐ”๋กœ ์„œ๋ก ์ด๋‹ค. ์„œ๋ก ์—์„œ๋Š” ์ฑ…์„ ์–ด๋–ป๊ฒŒ ์ฝ์–ด์•ผ ํ•˜๋Š” ์ง€ ๊ฐ€์ด๋“œ๋ฅผ ์ œ์‹œํ•ด์ค€๋‹ค. ๋˜, ์ €์ž๊ฐ€ ์ด ์ฑ…์„ ํ†ตํ•ด ๋งํ•˜๊ณ ์žํ•˜๋Š” ๋ชจ๋“  ๊ฒƒ์ด ์š”์•ฝ๋˜์–ด ๋‚˜์˜ค๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€์žฅ ๊ผผ๊ผผํžˆ ์ฝ์–ด์•ผ ํ•œ๋‹ค. ์„œ๋ก  ํด๋ฆฐ์ฝ”๋“œ๋Š” ์–ด๋–ค ์ฑ…์ธ๊ฐ€ IT ๋ถ„์•ผ๋Š” ๋งค์šฐ ๋น ๋ฅด๊ฒŒ ๋ณ€ํ™”ํ•˜๊ณ , ๋˜ ์ง„ํ™”ํ•˜๊ณ  ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ‘ํด๋ฆฐ ์ฝ”๋“œ’์—์„œ ์„ค๋ช…ํ•˜๋Š” ์›์น™๊ณผ ๊ธฐ๋ณธ์€ ๋ณ€ํ•˜์ง€ ์•Š์•˜๋‹ค. ์ด ์ฑ…์ด ์ ˆ๋Œ€์ ์ด๋ผ ์ƒ๊ฐํ•˜๋ฉด ์•ˆ๋˜๋ฉฐ, ์–ธ์ œ๋“ ์ง€ ๊ฐœ์„ ์˜ ์—ฌ์ง€๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ํŽธ์ด ๋ฐ”๋žŒ์งํ•˜๋‹ค. ํด๋ฆฐ์ฝ”๋“œ๋Š” ๋ฌด๋ ค 2013๋…„ 12์›” 24์ผ์— ์ถœ๊ฐ„๋œ, 10๋…„๋œ ์ฑ…์ด๋‹ค. ๊ทธ๋งŒํผ ‘ํด๋ฆฐ ์ฝ”๋“œ’๋Š” ํŠน์ • ์–ธ์–ด์™€ ํ”„๋ ˆ์ž„์›Œํฌ, ๋˜๋Š” ํ™˜๊ฒฝ์— ๊ตญํ•œ๋˜์ง€ ..

  5. [three.js] 3D ์Šคํ„ฐ๋””๋ฅผ ์‹œ์ž‘ํ•˜๋ฉฐ

    3D ์Šคํ„ฐ๋”” ๊ฐ€๋ณด์ž๊ตฌ ๐Ÿš€ ํ‰์†Œ์—๋„ ๋งค๋ ฅ์ ์ธ ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์›น์„ ๊ตฌํ˜„ํ•ด๋ณด๊ณ  ์‹ถ๋‹จ ์ƒ๊ฐ์ด ์ปธ๋‹ค. ๊ทธ๋Ÿฌ๋˜ ์ค‘ three.js ๊ณต์‹ ๋ฌธ์„œ์— ์†Œ๊ฐœ๋˜์–ด์žˆ๋Š” ์—ฌ๋Ÿฌ 3D ์›น์— ๋งค๋ฃŒ๋˜์—ˆ๊ณ , 3D๋ฅผ ํ™œ์šฉํ•œ ์ธํ„ฐ๋ ‰์…˜์„ ์ง์ ‘ ๊ตฌํ˜„ํ•ด๋ณด๊ณ  ์‹ถ์–ด ์Šคํ„ฐ๋””๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ๋กœ ํ•˜์˜€๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ •๋ง ์ข‹์€ ๊ธฐํšŒ๋กœ ๋””์ž์ด๋„ˆ ํ•œ ๋ถ„์„ ๋ชจ์‹œ๊ณ  3D ์Šคํ„ฐ๋””๋ฅผ ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. (๋””์ž์ด๋„ˆ 1๋ช…, ํ”„๋ก ํŠธ์—”๋“œ 3๋ช…) three.js vs babylon.js ์›น์—์„œ 3d๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ์œ ๋ช…ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” three.js์™€ babylon.js๊ฐ€ ์žˆ๋‹ค. ์ด ๋‘˜์˜ ์ฐจ์ด์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. (๋ ˆํผ๋Ÿฐ์Šค) three.js babylon ์ฃผ์šฉ๋„ ๊ฐ„๋‹จํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฒŒ์ž„ ๊ฐœ๋ฐœ ์ปค๋ฎค๋‹ˆํ‹ฐ ํฌ๋‹ค ์ž‘๋‹ค ํŠน์ง• ๊ฐ€๋ณ๊ณ  ๋‹จ์ˆœํ•˜์—ฌ ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์›€ ๋ณต์žกํ•˜์ง€๋งŒ ๊ธฐ๋Šฅ์ด ํ’๋ถ€ํ•จ (๋ฌผ๋ฆฌ ์—”์ง„, ์• ๋‹ˆ๋งค์ด..