챌린지

오늘은 이어서 Part3 [Three.js 기초]의 Chapter02 3D큐브 강의를 들었습니다.(13~14강) 그럼 오늘 강의에서 배운 내용들을 간략하게 작성해 볼게요! 🔎01. OrbitControls 화면상에서 인터렉티브하게 카메라 컨트롤을 가능하게 해주는 threejs 빌트인 기능입니다. 카메라가 물체 주변에서 궤도를 그리며 돌고있는 걸 생각하시면 되겠습니다. https://threejs.org/docs/index.html?q=Orbit#examples/en/controls/OrbitControls three.js docs threejs.org OrbitControls는 three/addons 패키지에서 직접 import해서 사용할 수 있습니다. import { OrbitControls } fro..

오늘은 이어서 Part3 [Three.js 기초]의 Chapter02 3D큐브 강의를 들었습니다.(11~12강) 그럼 오늘 강의에서 배운 내용들을 간략하게 작성해 볼게요! 🔎01. 큐브에 애니메이션 적용하기 애니메이션은 정적인 장면을 시간의 흐름에따라 연속으로 여러 장 찍은 다음 하나로 이어붙인 것이라 볼 수 있습니다. (여기서 정적인 사진 찍기 = render 메서드 호출) FPS : 1초에 몇번 렌더링할 수 있는지를 나타내는 단위. - 예로 FPS=24는 1초에 총 24장의 사진을 렌더링할 수 있다는 의미 - 브라우저마다 차이가 있으나 보통 60FPS 지원 window.requestAnimationFrame : 짧은 시간 단위로 render 메서드 호출할 때 사용하는 브라우저 API 웹에서 사용할 애..

오늘은 이어서 Part3 [Three.js 기초]의 Chapter02 3D큐브 강의를 들었습니다.(08~10강) 그럼 오늘 강의에서 배운 내용들을 간략하게 작성해 볼게요! 8, 9 강은 threejs 문서에서 Material과 Camera 사용법과 예시를 같이 살펴보았습니다. https://threejs.org/docs/index.html#api/en/materials/LineBasicMaterial three.js docs threejs.org 🔎01. Material 살펴보기 LineBasicMaterial - 선형태의 오브젝트를 표현할 때 사용할 수 있습니다. MeshBasicMaterial - 조명에 영향을 받지 않기 때문에 빛 유무와 상관없이 잘 보이나 음영표현이 되지 않습니다. MeshMate..

오늘은 이어서 Part3 [Three.js 기초]의 Chapter02 3D큐브 강의를 들었습니다.(06~07강) 그럼 오늘 강의에서 배운 내용들을 간략하게 작성해 볼게요! 조명 추가하기 scene에 조명을 추가하여 물체에 입체감을 더할 수 있습니다. Three.js에는 카메라처럼 다양한 조명 객체를 보유하고 있는데 오늘은 그 중 directionalLight와 ambientLight 조명을 사용해 보았습니다. directionalLight : 특정한 방향으로 직사광선을 내려주는 조명으로 3D 오브젝트에 대해 그림자 음영을 추가할 수 있습니다. ambientLight: scene의 은은한 밝기만 조정할 수있고 그림자 음영은 표현할 수 없습니다. *주의할 점 : 이전에 사용했던 MeshBasicMateria..

오늘은 이어서 Part3 [Three.js 기초]의 Chapter02 3D큐브 강의를 들었습니다.(01~05강) 그럼 오늘 강의에서 배운 내용들을 간략하게 작성해 볼게요! Three.js의 기본 4요소 Three.js는 크게 Renderer, Scene, Camera 그리고 3D Objects를 사용해서 3차원 물체를 보여줍니다. 강의에서는 이런 기본 요소들을 영화 촬영에 빗대어 설명해주셨습니다. Scene은 이름 그대로 장면을 의미하며 씬에 배우, 주변 풍경 등을 담는 것과 마찬가지로 Three.js에서는 Mesh, Object, Light와 같은 3차원 오브젝트로 표현됩니다. 이런 씬들을 카메라를 통해 촬영하고, Renderer를 통해 그 결과물을 확인할 수 있습니다. 물체를 보여주려면 우선 rend..

오늘은 이어서 파트3 [Three.js 기초] 챕터 01의 4, 5강을 들었습니다! 분명 오늘은 꼭 많이 들어야지싶었는데 역시 평일에 강의를 듣는 것은 쉬운일이 아니군요..ㅋ-ㅋ 그럼 오늘 강의에서 배운 내용들을 간략하게 작성해 볼게요! Three.js를 설치하는 방법은 다양하지만(cdn, 직접다운로드 등) 강의에서는 모던 빌드 툴을 통해 프로젝트를 구성하고 npm으로 three.js를 설치하는 방식으로 진행했습니다. 이때 사용한 빌드 도구인 비트에 대해 알아보겠습니다. Vite(비트) - Vue 창시자인 Evan You가 만든 빌드 도구로 기존 번들러와 esbuild의 장점을 합쳐 빠른 빌드 속도 제공 * esbuild는 Go로 작성된 모듈 번들러로 Webpack, percel과 같은 기존 모듈 번들러..