note

[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] 힘 개념 이해하기 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₁​ 과 ..

[JS] 힘 개념 이해하기 2 | 칸 아카데미

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-forces/a/modeling-gravity-and-friction 중력 및 마찰력 모델링 지난 예제에서 만든 중력을 개선하면서 여기에 마찰력을 추가시켜 보자. 지구의 중력 뉴턴의 제2법칙에 따라 질량이 작으면 가속도가 크다고 설정했지만 실제로는 그렇지 않다. 중력은 물체의 질량에 따라 달라진다. 물체가 무거울수록 힘이 더 크기 때문에 힘이 질량에 따른다면, 힘을 질량으로 나누었을 때 질량은 사라진다. 프로그램에 만들었던 질량에 따른 가속도(중력)에 이를 구현하면 다음과 같다. 마찰력 마찰력은 산일적인 힘이다. 산일적인 힘..

[JS] 힘 개념 이해하기 1 | 칸 아카데미

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-forces/a/newtons-laws-of-motion 뉴턴의 운동 법칙 벡터(vector)처럼, 힘(force)은 다양한 의미를 가지고 있다. 힘은 어떤 강력한 물리력, 이를테면, 바위를 큰 힘으로 미는 것을 의미하는 개념이 될 수 있다. 여기서 다룰 힘 의 정의는 물리학에서 배우는 힘이고, 아이작 뉴턴(Isaac Newton)의 운동의 법칙에서 비롯된 개념이다. 힘은 질량을 지닌 물체를 가속하는 벡터다. 뉴턴의 제1법칙 뉴턴의 제1법칙은 다음과 같이 정의한다. 움직이지 않는 물체는 계속 움직이지 않으려 하고 움직이는 물..

[JS] 벡터 개념 이해하기 3 | 칸 아카데미

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-vectors/a/static-functions-vs-instance-methods 정적 함수 vs. 인스턴스 메소드 알고리즘 #3 (마우스를 따라 가속)을 살펴보기 전에 벡터와 PVector객체를 사용할 때 필요한 중요한 개념을 이해해야 할 필요가 있다. 정적(static) 메소드와 인스턴스(instance) 메소드를 사용하는 것에 무슨 차이가 있는지 알아보자. x 값은 0이고 y를 더해 x는 5가되는 코드를 PVector 기반으로 변경하면 아래와 같다. 벡터 v의 값은 (0,0)이고 v에 u를 더해 v는 (4,5)가 된다..

[JS] 벡터 개념 이해하기 2 | 칸 아카데미

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-vectors/a/vector-magnitude-normalization 벡터 크기의 정규화 피타고라스의 정리 공식을 활용하면 실제 벡터의 길이(픽셀)를 계산할 수 있다. 이를 PVector 객체에서 구현하기 위한 코드는 다음과 같다. PVector.prototype.mag = function() { // sqrt : 제곱근을 반환하는 메소드 return sqrt(this.x * this.x + this.y * this.y); }; 벡터의 크기를 계산할 수 있으면 정규화도 가능하다. 정규화란 무언가를 표준화 시키거나 다른 것..

[JS] 벡터 개념 이해하기 1 | 칸 아카데미

✏차장님께서 알려주신 사이트에서 벡터 알아보기 https://ko.khanacademy.org/ 벡터란? 벡터는 사물의 움직임을 프로그래밍하기 위한 가장 기본적인 구성요소다. 일반적으로 벡터는 화살표로 표현한다. 화살표가 가리키는 쪽은 방향을 나타내며 화살표의 길이는 크기를 나타낸다. 왜 벡터를 사용할까? 코드를 단순화하고 좀 더 적은 수의 변수를 사용할 수 있다. 또한, 움직임을 프로그래밍하는 동안 반복적인 수학 연산을 할 때 편리한 함수 집합의 역할을 한다. pVector를 이용한 프로그래밍 예시 캔버스를 이용해서 Bouncing Ball 애니메이션을 만들었다. 도형이 각 프레임마다 특정 픽셀만큼 가로 및 세로로 움직이도록 프로그래밍 되어있다. 현재 변수는 아래와 같다. (x 좌표, y 좌표, x 속..