평온한 하루

간단한 박스의 색깔과 형태를 변형하는 코드를 작성해보자.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 환경에서 Thr..

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

이전 글: 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에 전방향 조명을 적..

https://be-at-peace.tistory.com/15 [three.js journey] 4강 복습: object transform (1)개요Scene에 담긴 오브젝트를 변형함으로써 나중에 애니메이션을 구현할 수 있다. 변형할 속성에는 4가지가 있는데 position, scale, rotation, quaternion이다.Object3D 클래스를 갖고 있는 모든 클래스 (예:be-at-peace.tistory.com 위 글에서 이어지는 내용이다. 2. Scale : 오브젝트 크기 조절하기아래 두 가지 방법 중 하나를 사용할 수 있다.mesh.scale.x = 2mesh.scale.y = 0.5mesh.scale.z = 0.5mesh.scale.set(2,0.5,0.5)  현재 보는 시점에서 가로로..

개요Scene에 담긴 오브젝트를 변형함으로써 나중에 애니메이션을 구현할 수 있다. 변형할 속성에는 4가지가 있는데 position, scale, rotation, quaternion이다.Object3D 클래스를 갖고 있는 모든 클래스 (예: Camera, Mesh, ... ) 들은 4가지 속성을 전부 가지고 있다. 패키지 내부를 살펴보면 Object3D 클래스 내 4가지 속성과 이를 상속 받고 있는 클래스들을 볼 수 있다.아래 박스와 AxesHelper를 가지고 오브젝트 변형을 실험해보자. 위를 준비하기 위한 코드는 아래와 같다.LineSegments는 편의상 추가한 것이므로 이후 코드에서는 생략한다.// Objectconst geometry = new THREE.BoxGeometry(1, 1, 1);c..