분류 전체보기

three.js 기본 장면 구성요소

three.js 기본 장면 구성요소 Scene (장면/무대) ThreeJS로 구현된 장면을 연극 무대로 가정 모든 요소가 올라가는 전체 배경, 장면 Mesh (메쉬) 무대에 올려져 있는 오브제를 메쉬라 한다. Geometry (모양) + Material (재질)로 이루어져 있다. Camera (카메라) Field of view (시야각)으로 장면을 보여준다. Light (빛) 필수는 아님 재질에 따라 필요할 경우가 있다. Render (랜더러) 카메라가 보여주는 장면 x축 좌, 우 y축 상, 하 위 쪽이 + 이다. z축 앞, 뒤 앞 쪽이 + 이다. near, far Near : 카메라의 시점이 시작되는 위치 Far : 카메라의 시점이 끝나는 위치 near와 far 사이에 있고 시야각(fov) 안에 들어와..

three.js란?

💡 3D 웹 애플리케이션 - 물리엔진으로 사실적인 움직임 만들기 - 점 (point)의 좌표를 활용해 파티클 효과 만들기 - 스크롤에 따라 반응하는 3D 비주얼이 적용된 페이지 만들기 ThreeJS 공식 사이트, 1분 코딩 사이트 웹에서 3D를 구현할 수 있는 자바스크립트 라이브러리 웹 브라우저에서 3차원 컴퓨터 그래픽스 애니메이션 응용을 만들고 표현하기 위해 사용되는 JS 라이브러리 WebGL을 쉽고 간편하게 사용할 수 있는 라이브러리 모듈 방식으로 개발하는 것은 권장. WebGL 웹 기반의 그래픽 라이브러리 자바스크립트 프로그래밍 언어를 통해 사용 가능 호환성이 있는 웹 브라우저에서 인터랙티브 한 3D 그래픽을 사용할 수 있도록 제공 2D, 3D 그래픽을 구현할 수 있음. (특히 3D 그래픽에 많이 ..

클로저

💡 클로저는 스코프와 실행 컨텍스트에 대한 사전 지식이 있으면 이해하는데 도움이 된다. 💡 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 💡 클로저는 외부함수보다 중첩함수가 더 오래 유지되고 이미 생명주기가 종료한 외부 함수의 변수를 참조할 수 있다. - 상위 스코프의 어떤 식별자도 참조하지 않는 함수는 클로저가 아니다. - 중첩 함수가 클로저였지만 외부 함수보다 일찍 소멸되면 클로저의 본질에 부합하지 않는다. 클로저 함수 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. MDN에서의 정의 : 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 렉시컬 스코프(= 정적 스코프) const x = 1; function foo() { const x = 10; /..

실행 컨텍스트

💡 렉시컬 환경 - 식별자와 스코프 관리 💡실행 컨텍스트 스택 - 코드 실행 순서 관리 실행 컨텍스트 자바스크립트의 동작 원리 개념을 통해 아래 내용을 이해할 수 있다. 스코프 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식 호이스팅이 발생하는 이유 클로저 동작 방식 태스크와 큐와 함께 동작하는 이벤트 핸들러 비동기 처리의 동작 방식 소스 코드의 타입 4가지 타입 코드는 실행 컨택스트를 생성한다. 4가지로 구분하는 이유는? 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이다. 전역 코드 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. var 키워드, 함수선언문 함수 코드 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 지역 스코..