์ ์ฒด ๊ธ
Three.js๋ก 3D ํ์ ๋ชฉ๋ง ๊ตฌํํ๊ธฐ
3D ํ์ ๋ชฉ๋ง ๊ตฌํ Three.js๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด์ ์นํ์ด์ง์ 3D ์ค๋ธ์ ํธ๋ฅผ ํํํ ์ ์๋๋ก ๋์์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. ์์ ์ด๋ฏธ์ง๋ Three.js๋ก ํ์ ๋ชฉ๋ง๋ฅผ ๊ตฌํํ ๊ฒ์ธ๋ฐ, ๊ทธ ๊ณผ์ ์ ๊ธฐ๋กํด๋ณด๊ณ ์ ํ๋ค.๐ ๋์์ธ ๋ ํผ๋ฐ์ค๋ก๋ ์๋ ์ฝ๋ํ์ ์ฐธ๊ณ ํ๋ค. See the Pen Responsive Houdini 3D Carousel ๐ด by Jhey (@jh3y) on CodePen. Three.js ํ๊ฒฝ ๊ตฌ์ฑ ์๋๋ Three.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฐ๋ฐ ํ๊ฒฝ์ ๋ง๊ฒ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ๋ค์ด๋ค. ์ด๋ฒ์๋ ์ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ํ์ผ์ ๋ค์ด๋ก๋ ๋ฐ์์ ์ํฌํธํ๋ ๋ฐฉ์์ผ๋ก ์ฌ์ฉํ๋ค. npm ํจํค์ง๋ก ์ค์นํ๋ ๋ฐฉ๋ฒ # three.js npm install --save three # vite npm install --s..
[Three.js] GIS Developer ๋์ Three.js ๊ฐ์ข - 5
GIS Developer ๋์ Three.js ๊ฐ์ข : https://www.youtube.com/watch?v=Oe4n0vyrSiU ์นด๋ฉ๋ผ (Camera) Camera๋ฅผ ์์๋ฐ๋ ํด๋์ค (Camera๋ object 3D๋ฅผ ์์๋ฐ๋๋ค - PerspectiveCamera : ๊ฐ๊น์ด ์๋ ๋ฌผ์ฒด๊ฐ ๋ฉ๋ฆฌ ์๋ ๋ฌผ์ฒด๋ณด๋ค ์๋์ ์ผ๋ก ํฌ๊ฒ ๋ณด์ด๋๋ก ์๊ทผ๊ฐ์ ํํํด์ ๋ ๋๋งํ๋ค. fovy, aspect, zNear, zFar๋ฅผ ์ธ์๋ก ๋ฐ๋๋ค. ์ด ์ธ์๋ค์ ํตํด ์ ๋์ฒด๊ฐ ๊ตฌ์ฑ๋๋ค. (์ ๋์ฒด ์์ ์กด์ฌํ๋ ๋ฌผ์ฒด๊ฐ ์นด๋ฉ๋ผ๋ฅผ ํตํด ๋ณด์ฌ์ง๊ฒ ๋๋ค) zNear์ zFar ๊ฑฐ๋ฆฌ ์ฌ์ด๋ฅผ ๋ฒ์ด๋๋ฉด ๋ ๋๋ง๋์ง ์๋๋ค. - OrthographicCamera : ๋ฌผ์ฒด๊ฐ์ ์๊ทผ๊ฐ์์ด ๋ฌผ์ฒด์ ํฌ๊ธฐ ํฌ๊ธฐ๋๋ก ๋ ๋๋งํ๋ค. zLeft, xRight..
[Three.js] GIS Developer ๋์ Three.js ๊ฐ์ข - 4
GIS Developer ๋์ Three.js ๊ฐ์ข : https://www.youtube.com/watch?v=L_70k2sAuds ์ฌ์ฉ์ ์ ์ ์ง์ค๋ฉํธ๋ฆฌ(Custom Geometry) : ๋ณต์กํ ํ์์ ๋ง๋ค ์ ์๋ค. BufferGeometry ์ ๋ํด ์ ์ํ ์ ์๋ ์์ฑ - position : geometry๋ฅผ ๊ตฌ์ฑํ๋ 3์ฐจ์ ์ขํ์ ๋ํ ์ ์ (Vertex) - normal : ๊ฐ ์ ์ ์ ๋ํ ์์ง ๋ฒกํฐ - color : ๊ฐ ์ ์ ์ ๋ํ ์์๊ฐ - uv : ๊ฐ ์ ์ ์ ๋ํ ํ ์ค์ณ ๋งคํ ์ขํ - Vertex Index๋ setIndex ๋ฉ์๋๋ก ์ง์ : position ์์ฑ์ผ๋ก ์ง์ ๋ ์ ์ ์ ๋ํ ์ธ๋ฑ์ค ๋ฐฐ์ด๋ก ์ง์ . ex) mesh๋ฅผ ๊ตฌ์ฑํ๋ ๋ฉด์ ์ต์ ๋จ์๋ ์ผ๊ฐํ์ด๊ณ ์ด ์ผ๊ฐํ์ 3๊ฐ์ ์ ์ ์ผ..
[Three.js] GIS Developer ๋์ Three.js ๊ฐ์ข - 3
GIS Developer ๋์ Three.js ๊ฐ์ข : https://www.youtube.com/watch?v=RxIwudO-YqY ์ฌ์ง(Material) Objct3D ์ Line์ ์์๋ฐ์ ํด๋์ค - LineSegments - LineLoop ์ฌ์ง(Material) ํด๋์ค - PointsMaterial : Points ํ์ ์ Object3D ๊ฐ์ฒด๋ฅผ ์ํ ์ฌ์ง, ์ขํ๋ฅผ ์ ์ผ๋ก ๋ ๋๋ง - LineBasicMaterial : Line ํ์ ์ Object3D ๊ฐ์ฒด๋ฅผ ์ํ ์ฌ์ง. ์ขํ๋ฅผ ์์๋๋ก ์ฐ๊ฒฐํด์ ๋ผ์ธ์ผ๋ก ๋ ๋๋ง - LineDashedMaterial : LineBasicMaterial ๋ฅผ ์์๋ฐ๋ ์์ ํด๋์ค - MeshBasicMaterial : Mesh ํ์ ์ Object3D ๊ฐ์ฒด๋ฅผ ์ํ ์ฌ์ง. ..
[Three.js] GIS Developer ๋์ Three.js ๊ฐ์ข - 2
GIS Developer ๋์ Three.js ๊ฐ์ข : https://www.youtube.com/watch?v=ITA9no8Bsio ์ง์ค๋ฉํธ๋ฆฌ (Geometry) : 3์ฐจ์ ์ค๋ธ์ ํธ์ ํ์์ ์ ์ Three.js ์์ ์ ๊ณตํ๋ ๊ธฐ๋ณธ ์ง์ค๋ฉํธ๋ฆฌ : ์ง์ค๋ฉํธ๋ฆฌ๋ ๊ธฐ๋ณธ์ ์ผ๋ก BufferGeometry ๋ฅผ ์์๋ฐ๊ณ ์๋ค. * BufferGeometry - BoxGeometry : ๊ฐ๋ก, ์ธ๋ก, ๊น์ด์ ๋ํ ํฌ๊ธฐ์ ๊ฐ๋ก, ์ธ๋ก, ๊น์ด ๊ฐ๊ฐ์ ๋ํ ๋ถํ (Segments) ์๋ก ์ ์๋๋ค. (๋ถํ ์ LineBasicMaterial์ ํตํด ์๊ฐ์ ์ผ๋ก ํ์ธ ๊ฐ๋ฅ) - CircleGeometry : ์ํ์ ํฌ๊ธฐ์ธ ๋ฐ์ง๋ฆ, ์ํ์ ๊ตฌ์ฑํ๋ ๋ถํ ๊ฐ์, ์์ ๊ฐ๋, ์ฐ์ฅ ๊ฐ๋๋ฅผ ์ธ์๋ก ๋ฐ๋๋ค. - ConeGeometry : ..
[Three.js] GIS Developer ๋์ Three.js ๊ฐ์ข - 1
GIS Developer ๋์ Three.js ๊ฐ์ข : https://www.youtube.com/watch?v=ZGACJosABBw ํ๊ธฐ์ฉ ๊นํ๋ธ : https://github.com/sduu/three-tutorial ๊ฐ๋ฐ ํ๊ฒฝ ๊ตฌ์ฑ 1. Visual Studio Code ์ค์น https://code.visualstudio.com/ 2. Three.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น : https://threejs.org/ : ์ค์ต์ module ๋ฐฉ์์ผ๋ก ๊ฐ๋ฐํ๊ธฐ๋๋ฌธ์ three.module.js ํ์ผ์ ์ฌ์ฉํ๋ค. 3. ์ค์ต์ ์งํํ html ํ์ผ์ ์์ฑ 4. ํ์ด์ง ์คํ์ ์ํด ์ค์ ํ์ผ์ ์์ฑ - VSCode ์คํ ๋ฐ ๋๋ฒ๊ทธ๋ฅผ ์ ํ (ctrl + shift + D) - launch.json ํ์ผ ๋ง๋ค๊ธฐ๋ฅผ ์ ํ ..
[JS] ์๊ฐ ํฌ๋งคํ (์์ผ, ์๊ฐ, AM/PM)
See the Pen Untitled by 23651 (@23651) on CodePen. function getDate() { const week = new Array('SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'); const today = new Date(); const dayName = week[today.getDay()]; const hours = today.getHours() % 12 ? today.getHours() % 12 : 12; const minutes = today.getMinutes() < 10 ? '0' + today.getMinutes() : today.getMinutes(); const..
[Webpack] Cannot find module 'sass' ์๋ฌ
node-sass ๊ฐ ์ค์น๋์ด ์๋์ง ํ์ธํด๋ณด๊ธฐ npm i node-sass -D
[Gulp] Task never defined: default ์ค๋ฅ
https://stackoverflow.com/questions/57693486/gulp-task-never-defined-task gulp4.0 ๋ฌธ๋ฒ์ผ๋ก ์์ ํ๊ธฐ: //before gulp.task('default', ['js']); //after gulp.task('default', gulp.series('js'));
[JS] ํ ๊ฐ๋ ์ดํดํ๊ธฐ 3 | ์นธ ์์นด๋ฐ๋ฏธ
https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-forces/a/gravitational-attraction ์ค๋ ฅ ์ธ๋ ฅ ์ง๋์ ๊ฐ์ง ๋ชจ๋ ๋ฌผ์ฒด๋ ๋ชจ๋ ๋ค๋ฅธ ๋ฌผ์ฒด์ ์ค๋ ฅ์ ๊ฐํ๋ค. ์๋์ ๊ทธ๋ฆผ๊ณผ ๊ฐ์ด ์ค๋ ฅ์ ์ธ๊ธฐ๋ฅผ ๊ณ์ฐํ๋ ์์ด ์๋ค. F ๋ ์ค๋ ฅ์ ๋ํ๋ด๋ ๊ฐ์ผ๋ก, ์ต์ข ์ ์ผ๋ก ๊ณ์ฐํ์ฌ applyForce() ํจ์์ ์ ๋ฌํ๋ ค๋ ๋ฒกํฐ๋ค. G ๋ ๋ง์ ์ธ๋ ฅ์ ์์๋ก 6.67428 x 10^-11 ์ด(s) ์ ๊ณฑ ๋ถ์ ํฌ๋ก๊ทธ๋จ(kg) ๋ถ์ ๋ฏธํฐ(m) ์ธ์ ๊ณฑ์ด๋ค. ์ด๊ฒ์ ํ์ ๋ณด๋ค ์ฝํ๊ฒ ๋ง๋ค๊ฑฐ๋ ๋ณด๋ค ๊ฐํ๊ฒ ๋ง๋๋ ์์๋ค. ์ด ๊ฐ์ 1๋ก ๋๊ณ ๋ฌด์ํด๋ ํฐ์ผ๋์ง ์๋๋ค. mโโ ๊ณผ ..