분류 전체보기

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₁​ 과 ..