본문 바로가기

전체 글

 (179)
OrbitControls OrbitControls Orbit 이라는 단어는 공전한다 라는 뜻을 가지고 있습니다. 3D 모델은 물론 rotation 기능을 통해 회전시키며 확인할 수 있지만 단순히 화면에 출력하는 것만으로는 사용자가 원하는 다양한 각도에서 모델을 확인하기 어렵습니다. 이를 위해 Three.js에서는 OrbitControls라는 모듈을 제공해 마우스를 통해 카메라를 자유롭게 조작할 수 있는 기능을 제공합니다. 정확히 말하자면 Orbit 이라는 단어와 뜻처럼 모델이 자전 하는 것이 아니라 모델을 중심으로 카메라가 공전(Orbit)하면서 움직이는 방식입니다. 사용자 입장에서는 모델을 둘러보는 것처럼 느껴지지만 실제로는 카메라의 위치와 방향을 계속 조작하는 것이라고 볼 수 있습니다. OrbitControls의 기능O..
glTF 포맷 & GLTFLoader glTF 포맷 glTF는 3차원 장면과 모델을 표현하는 파일의 포맷입니다(.gltf) 3D 모델을 생성하는 방법, 툴, 확장자는 여러가지 이지만, 웹에서 3D 모델을 동작하기 위해선 gltf, glb와 같은 확장자 포맷이 필요합니다.https://dkkim2318.tistory.com/185 3D 객체 렌더링이번 포스트에서는 Three.js를 통해 3D 모델을 생성해 렌더링 해보는 예제를 수행하겠습니다. Three.js는 전용 IDE나 에티터 툴이 없기 때문에 웹상에 에디터 프로그램이나 vscode 등등 어떤 도구를 가dkkim2318.tistory.com실제로 이전 포스트 내용처럼 Three.js로 3D 모델을 직접 생성하고 렌더링할 수 있지만, 실제 현업에서는 이러한 방식보다 3D 모델링 툴과 전문..
3D 객체 렌더링 이번 포스트에서는 Three.js를 통해 3D 모델을 생성해 렌더링 해보는 예제를 수행하겠습니다. Three.js는 전용 IDE나 에티터 툴이 없기 때문에 웹상에 에디터 프로그램이나 vscode 등등 어떤 도구를 가지고 작업을 해도 상관없습니다. Three.js를 통한 큐브 렌더링1. Three.js 사용 준비 Three.js는 자바스클비트 라이브러리입니다. 라이브러리를 활용할 수 있는 어러 방법이 있지만 이번 예제에서는 제일 간단히 HTML에 CDN으로 Three.js를 임포트 해주곘습니다.여기서 주의해야할 점은 script 태그의 type 입니다. 웹 개발에서 script 태그는 보통 타입을 명시하지 않거나, js를 지정해 주는데 해당 예제는 Three.js의 module을 import 하고 ..
Three.js의 기본 요소 Three.js 설치 Three.js를 알아보기 앞서, 설치 방법을 알아 보겠습니다. Three.js는 npm을 통해 설치가 가능합니다, npm install --save three위와 같은 명령어를 통해 설치가 가능하며 상세한 방법은 Three.js의 공식문서를 참고 해주시기 바랍니다.https://threejs.org/docs/index.html#manual/en/introduction/Installation three.js docs threejs.org또한 레퍼런스를 참고하여 설치하는 것도 가능합니다.https://threejs.org/ Three.js – JavaScript 3D Library threejs.org 해당 사이트는 Three.js의 레퍼런스를 공휴하는 사이트인데 해당 사이트에서 파일..
WebGL 과 Three.js WebGL 일반적으로 웹은 텍스트와 정적인 디자인 요소의 조합으로 이루어져있습니다. 그러나 필요에 따라 화면 속 물건을 둘러보거나 입체적으로 무언가를 표혀하기 위해 3D 모델이나 인터렉티브한 동작을 추가하기 위해선 정체 모를 모듈 프로그램이나, 동영상으로 대체하는 경우가 빈번했습니다. WebGL은 이러한 특정 3D 모델이나 인터렉티브한 동작을 별도의 설치없이 구현하기 위해 JS로 설계된 웹 브라우저용 3D 엔진입니다. Three.js WebGL의 장단점은 여러가지가 있지만 단점 중 가장 큰 부분은 학습 난이도입니다. 코딩에 필요한 지식이 필요함에 앞서 그래픽에 대한 이해가 있어야하며 3D 모델과 제어에 활용되는 요소에 대한 이해가 있어야 합니다. 또한 WebGl은 하드웨어와 아주 가깝게 맞닿아 있는 L..
Pydantic 동적 타입(Dynamic Typing) 언어 파이썬은 동적 타입(Dynamic Typing)으로 설계된 언어 입니다. C언어나 JAVA와 같은 정적 타입 언어의 경우 변수를 만들 때 타입을 명시하여 메모리에 얼마나 쓸지 미리 지정해야하는 반면, 파이썬과 같은 동적 타입 언어는 코드가 실행 될 때 변수의 타입을 알아서 추론하는 방식입니다. 동적 타입 언어는 많은 장점을 가지고 있습니다. 타입을 일일이 지정하지 않기 때문에 코드가 간결해 지며, 자바와 같은 언어에서는 제네릭이나 다형성, Object 자료형 등을 복잡하게 설계해야하는 함수나 리스트의 경우에도, 파이썬은 동적 타입 덕분에 함수나 리스트에 온갖 종류에 데이터를 섞어도 빌드 과정에서 에러를 일으키지 않습니다. 또한 개발 입문자나, 코딩이 필요한..
FastAPI와 비동기 동기식 / 비동기식프로그래밍을 하다보면 동기식 / 비동기식이라는 개념을 많이 접하곤 합니다. 프로그래밍 언어에서의 동기식 / 비동기식 정의를 살펴보면 아래와 같습니다.동기식 :하나의 작업이 완료된 후 다음 작업을 수행하는 방식 즉, 현재 작업이 끝날 때까지 다음 작업은 대기비동기식 : 작업이 완료될 때까지 기다리지 않고, 기다리는 동안 다른 작업을 수행할 수 있는 방식 세상에는 많은 프로그래밍 언어가 있고 대부분의 언어는 동기식과 비동기식을 양쪽 모두 지원합니다. 그러나 보통 특정 언어는 두가지 중 하나의 특징이 더욱 강조되곤 합니다. 예를 들면 C/C++ 과 java 와 같은 언어는 동기식이 더 강도되는 반면 파이썬이나 JS의 같은 경우는 비동기식이 더욱 강조되는 경향이 있습니다. 조금더 자세히..
SQLAlchemy CRUD 만들기 지난 포스트에서 FastAPI와 SQLAlchemy 연동을 수행하였습니다. 이제 이를 통해 간단한 CRUD 로직을 구현해 보겠습니다. CRUD 디렉토리 구조 https://dkkim2318.tistory.com/175 FastAPI 프로젝트 생성프로젝트 디렉토리 생성FastAPI의 프로젝트를 생성할 디렉토리를 만들어 줍니다. 해당 포스트에서는 C:\FastAPI\projects 디렉토리를 만들겠습니다. 디렉토리를 만든 후 프로젝트를 추가하기 전 가상dkkim2318.tistory.com 해당 포스트의 디렉토리 구졸르 참조하여 먼저 디렉토리를 구성해 보겠습니다. schemas/ 와 같은 경우에는 아직 pydantic에 대해 다루지 않았기 떄문에 데이터메이스와의 매핑은 models로만 구성하겠습니다. 아래 ..

티스토리툴바