본문 바로가기

Three.js9

[threejs-journey 1-9] Debug UI 개요Three.js를 사용하면서 3D Scene의 파라미터를 실시간을 조정하고 싶은 순간이 있습니다. 조명 세기, 카메라 위치, 메쉬의 회전값, 머터리얼의 컬러 등 에 매우 유용한 도구가 바로 dat.GUI와 lil-gui입니다. 이 글에서는 그 차이와 사용법, 그리고 실제 실무에서 활용할 수 있는 예제들을 하나씩 정리해봅시다. dat.GUIdat.GUI는 Three.js 예제에서 오랫동안 사용된 고전적인 UI 컨트롤 라이브러리입니다. 사이드에 뜨는 슬라이더 기반의 컨트롤러를 통해 개발자가 실시간으로 3D 오브젝트 속성값을 조절할 수 있도록 도와줍니다.const gui = new dat.GUI();gui.add(light, 'intensity', 0, 2, 0.01); // 라이트 세기 조절gui.add.. 2025. 6. 22.
[threejs-journey 1-8] Geometries 개요Three.js의 Geometry는 정점(Position), 법선(Normal), UV, 인덱스(Index) 등으로 구성되며, 모델의 형태를 정의하는 핵심 데이터입니다. 실무에서는 GPU에 최적화된 BufferGeometry와 Mesh 객체를 조합해 효율적인 렌더링과 조작을 수행합니다. - GeometryThree.js의 Geometry는 다음과 같은 요소로 이루어져 있습니다:Position: 각 정점의 3D 위치. (x, y, z) 좌표값Normal: 정점 또는 면의 방향 벡터. 조명 연산에 사용 UV: 텍스처 맵핑을 위한 2D 좌표. (u, v) 범위는 보통 0~1의 UV좌표 존재Index: 중복 정점의 재사용을 위한 인덱스 배열이러한 정보는 BufferGeometry를 통해 효율적으로 GPU에 .. 2025. 6. 16.
[threejs-journey 1-7] Resizing & FullScreen 개요Three.js를 이용해 웹에서 3D Scene을 구현할 때는 브라우저의 크기 변화나 디스플레이 환경에 따라 다양한 문제가 발생할 수 있습니다. 본 문서에서는 창 리사이징 시 발생하는 화면 찌그러짐과 여백 문제, 그리고 전체화면(Fullscreen) 모드 구현에 대한 해결 방법을 다루겠습니다. - ResizingThree.js로 만든 3D Scene을 웹을 렌더링하면, 브라우저 창 크기를 조절할 때 그림이 찌그러지거나, 모서리에 하얀 여백이 생기는 현상이 발생할 수 있습니다. 기존 sizes를 800x600 에서 window.inner 변수를 이용해 실제 뷰 포트를 조정해줍니다.const sizes = { width: window.innerWidth, height: window.in.. 2025. 6. 12.
[threejs-journey 1-6] Control 개요Three.js에서는 다양한 카메라 및 오브젝트 제어 컨트롤(Controls)이 제공되어, 3D 장면을 보다 자유롭고 직관적으로 탐색하거나 조작할 수 있도록 도와줍니다. 각 컨트롤은 사용 목적과 조작 방식이 다르므로, 모든 기능을 암기할 필요는 없습니다. 대신, 사용하려는 상황에 따라 적절한 컨트롤을 선택하여 문서를 참고하면서 적용하면 됩니다.- 각 컨트롤은 Three.js 공식 문서에서 예제와 함께 확인할 수 있습니다.- 대표적인 컨트롤로는 OrbitControls, FlyControls, FirstPersonControls, PointerLockControls, TrackballControls, TransformControls, DragControls 등이 있으며, 각각의 특성과 입력 방식이 다릅.. 2025. 6. 10.
[threejs-journey 1-6] Camera 개요 이번 글에서는 Three.js에서 제공하는 다양한 카메라 클래스들의 특성과 용도를 알아보고, 마우스 인터랙션을 통해 카메라를 조작하여 3D 메쉬를 관찰하는 방법까지 실습을 통해 정리합니다. 특히 PerspectiveCamera, OrthographicCamera, CubeCamera 등 카메라의 종류와 차이점을 설명하며, 마지막에는 마우스를 이용해 카메라를 회전 궤도로 이동시키는 방법을 삼각함수를 이용해 구현합니다. - Camerahttps://threejs.org/docs/#api/en/cameras/Camera three.js docs threejs.org Camera는 추상 클래스이기 때문에 직접 인스턴스를 생성해 사용할 수 없습니다. 대신 다양한 용도에 맞는 하위 클래스들(ArrayCamer.. 2025. 6. 10.
[threejs-journey 1-5] Animation 개요혹시 플립북(flip book)을 아시나요? 이름은 몰라도 한 번쯤은 보신 적이 있을 겁니다. 종이에 한 장씩 그림을 그리고 빠르게 넘기면 마치 그림이 움직이는 것처럼 보이죠? 이게 바로 애니메이션의 기본 원리입니다. - 예시https://www.youtube.com/watch?v=uMky_iMPVM4이 원리는 컴퓨터 애니메이션에도 그대로 적용됩니다. 컴퓨터는 매 순간 장면을 한 프레임씩 계싼해 화면에 그려냅니다. 다만, 사람이 손으로 넘기는 것보다 훨씬 빠르게, 초당 60프레임(60FPS) 혹은 144프레임(144FPS) 속도로 그리기 때문에 부드럽고 생동감 있게 느껴지는 것이죠. - requestAnimationFrame https://developer.mozilla.org/ko/docs/W.. 2025. 6. 3.

티스토리툴바