평온한 하루

윈도우 컴퓨터에서 VirtualBox를 사용해 가상 머신에서 Rocky Linux 8 실습 환경을 구성했다.1. 다운로드준비물- VirtualBox: https://www.virtualbox.org/wiki/Downloads 에서 Window Host 선택해 설치- Rocky Linux 8: https://rockylinux.org/ko-KR/download?arch=x86_64 에서 minimal ISO 선택해 다운로드과정1. VirtualBoxVirtualBox 프로그램 설치 및 D 드라이브 용량이 많이 남아서 가상 머신 저장 기본 경로(Default Machine Folder)를 D드라이브로 설정했다.2. Rocky Linux 8Rocky Linux 8 이미지 파일을 다운로드하는데 조금 느린 거 같..

프로젝트의 성격에 따라 CSS 관리 전략도 달라지겠지만, 개인적으로 선호하는 전략이 있다.바로 Tailwind를 적극 활용하는 방식이다.프로젝트 규모가 커질수록 디자인 시스템이 없으면 급하게 스타일을 적용하거나 수정하게 되고, 결국 확장이 어렵고 통제가 되지 않는다.CSS 관리는 정말 망가지기 쉽다. Tailwind를 썼을 때 장점은 프로젝트의 규모가 커졌을 때에도 어떤 스타일이 적용됐는지 알기 쉽고 추가/수정도 간단하다는 점이다. 다만, 클래스가 많아질수록 가독성이 떨어진다. 특히 중복되는 조합이 여러 개 발생할 때 무언가 잘못됐고 중복을 없애고 싶은 마음이 생긴다. 버튼 Tailwind에서는 자주 쓰이는 클래스의 묶음을 @apply를 통해 재활용할 수 있다. 커스텀 스타일이랑 섞어서 만들 수도 있..

간단한 박스의 색깔과 형태를 변형하는 코드를 작성해보자.Canvas에 박스를 띄우고, 버튼을 누르면 박스가 변형되도록 만들 것이다. 1. 환경 세팅환경은 Vite + Vanilla ts + Three.js로 구성했다.DOM은 간단히만 다룰 거라 React는 사용하지 않았다.npm create vite@latestvite로 vanilla ts를 시작하기 위해서는 위 명령어를 입력한 뒤 쉘에서 typescript를 선택하면 된다.자세한 사항은 아래 공식 문서 링크에 있다. https://ko.vite.dev/guide/ ViteVite, 프런트엔드 개발의 새로운 기준ko.vite.dev Three.js 설치 및 타입 적용npm install three @types/three Typescript 환경에서 Th..

캔버스를 더 이상 800x600가 아닌 브라우저 뷰포트에 꽉 차도록 하고 싶다면 window 인터페이스와 css를 활용하면 된다.브라우저가 리사이즈될 때 캔버스도 이와 동기화하고 싶다면 resize 이벤트를 사용하면 된다. 7강에서는 위와 같은 내용을 배우며, 그 외에 pixel ratio와 fullscreen에 대해서 더 알아볼 것이다. 1. 브라우저 viewport에 캔버스 맞추기window의 innerWidth, innerHeight 속성을 사용해 canvas의 크기를 정해줄 것이다.const sizes = { width: window.innerWidth, height: window.innerHeight} CSS는 아래와 같이 하면 뷰포트 전체를 차지하게 된다.*{ margin: 0..

이전 글: https://be-at-peace.tistory.com/18 Controls는 카메라의 움직임을 제어할 수 있도록 해준다.카메라맨이 카메라 위치, 각도, 바라보는 대상을 제어하는 것과 같다고 느꼈다. 마우스에 따라 카메라를 위치를 바꾸는 custom controls를 만들어보자.PerspectiveCamera를 제어해볼 것이며 이후 three.js journey 강의에서도 PerspectiveCamera만 사용한다. 1. Custom Controls커서 위치에 따라 카메라 position 변화하게 만들기 위와 같이 마우스 커서로 상호작용하려면 어떻게 해야할까?우선 웹 api인 mousemove 이벤트를 활용한다.canvas.addEventListener("mousemove", (e) => {..

이전 글: https://be-at-peace.tistory.com/19Draco 압축Draco 압축 파일을 로드하기 위해선 GLTFLoader와 더불어 DRACOLoader가 필요하다. DRACOLoader 인스턴스를 GLTFLoader에 전달하면 된다.DRACOLoader 추가하기Draco는 3D 모델의 파일 크기를 줄이기 위해 사용되는 압축 알고리즘인데, 압축 해제를 위해서는 브라우저에서 디코딩할 수 있는 decoder가 필요하다. Decoder는 순수 JS뿐만 아니라 웹 어셈블리(wasm)로도 작성할 수 있으며, 워커(다른 스레드)에서 실행할 수도 있다.Decoder에 웹 어셈블리나 워커를 사용하면 성능을 크게 향상시키지만 별도의 실행 환경과 데이터 전송 방식을사용해야 한다는 단점이 있다. Thr..

Three.js에서 다양한 기본 geometry를 지원한다.그러나 복잡한 모형을 띄우려면 기본 geometry를 사용하는 것보다 전용 툴로 만들어놓은 3D model을 import해서 사용하는 것이 좋다. 다양한 3D 모델 포맷을 알아보고 대표적인 포맷인 glTF를 로드하고 사용하는 방법을 알아보자.Format3D 모델 포맷은 정말 다양하며 아래 목록에서 찾아볼 수 있다.https://en.wikipedia.org/wiki/List_of_file_formats#3D_graphics List of file formats - WikipediaFrom Wikipedia, the free encyclopedia Historical and current file formats This is a list of fi..

Three.js는 총 5종류의 카메라를 지원한다.PerspectiveCameraOrthographicCameraArrayCameraStereoCameraCubeCamera 원근감을 제공해 사람의 눈과 가장 비슷한 PerspectiveCamera가 대부분의 3D 장면에 사용되고, 그 다음으로 2D와 같이 원근감이 없어야 하는 경우 OrthgraphicCamera를 많이 사용한다. 위 순서대로 각 카메라의 특징을 살펴보자. 1. Perspective Camera개요예시:const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 1, 100) 설명:PerspectiveCamera( fov : Number, aspect : Number,..

Three.js에서 애니메이션의 작동 원리애니메이션은 움직이고 있는 물체의 사진을 연속적으로 찍고, 그 사진을 연속적으로 보여주는 것과 같다. Three.js에서의 애니메이션도 이와 같다. 객체를 움직이고, 그 위치를 렌더링한 다음, 객체를 조금 더 움직이고 다시 렌더링하는 과정을 반복하는 방식이다. 렌더링 간에 객체를 더 많이 움직일수록 객체가 더 빠르게 움직이는 것처럼 보인다. 애니메이션 구현 방법은 여러가지가 있으며 크게 3가지가 있다.이 때 발생하는 문제와 대표적인 해결법을 해결 원리와 함께 소개한 뒤, 나머지 2가지를 설명하겠다. 목차1. 웹 API인 requestAnimationFrame 사용하기 (대표)2. three.js에서 제공하는 빌트인 솔루션인 Clock 사용하기3. 라이브러리 사용..

개요조명(lights)을 공부하면서 3D 그래픽을 그리는 것이 실제 사진 스튜디오 현장과 비슷하다고 느꼈다.흰 천으로 둘러진 Scene이 있고 그 안에 Objects들을 놓을 수 있으며 Lights를 배치한 뒤 Camera로 찍는 것이 실제와 비슷한 것 같다. 조명이 없으면 보이지 않는 materialMeshLambertMaterial, MeshPhongMaterial, MeshToonMaterial이들은 조명이 없으면 보이지 않는다. material 내 rougness 조절material의 roughness를 조절하여 빛의 반사를 볼 수 있다.roughness가 0이면 빛을 가장 잘 반사하고, 1이면 빛을 거의 반사하지 않는다. AmbientLightscene의 모든 geometry에 전방향 조명을 적..