본문 바로가기

전체 글459

12 텍스트(3D Text) Three.js 텍스트 포트폴리오 구현 (Ilithya 스타일)개요화면 중앙에 3D 텍스트를 배치하고, 주변에 도넛(Torus)을 무작위로 떠다니게 배치고성능 MeshMatcapMaterial을 사용해 멋진 외관과 성능을 동시에 확보글꼴은 .typeface.json 형식을 사용하며, FontLoader와 TextGeometry로 구현center()와 boundingBox를 활용해 텍스트 정렬글꼴 불러오기helvetiker_regular.typeface.json 등 .typeface.json 파일 필요변환 사이트또는 Three.js 내장 폰트 사용: three/examples/fonts/파일을 /static/fonts/ 같은 정적 폴더에 위치import { FontLoader } from 'three/ex.. 2025. 7. 23.
11 머티리얼(Material) Three.js 머티리얼(Material)개요머티리얼(Material)은 메시(mesh)의 기하 구조(geometry)에 시각적 속성을 부여하는 요소실제 색상은 셰이더(shader)라는 GPU 프로그램에 의해 계산됨셰이더는 직접 작성할 수 있으나 Three.js는 다양한 내장 머티리얼을 제공함이 문서에서는 주요 머티리얼을 실습하며 각 속성과 사용법을 정리기본 설정// 재질 생성const material = new THREE.MeshBasicMaterial();// 메시 3개 생성 및 재질 공유const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 16), material);sphere.position.x = -1.5;const plane = ne.. 2025. 7. 23.
10 텍스처(Texture) 텍스처(Texture)란 무엇인가?Three.js에서 텍스처(Texture)는 지오메트리(Geometry)의 표면을 덮는 이미지입니다. 이는 단순한 색상 효과를 넘어서 조명, 표면 세부묘사, 반사 등 다양한 시각적 효과를 만들어냅니다.1. 주요 텍스처 종류1.1 Color / Albedo Map (색상 맵)지오메트리의 기본 색상을 제공합니다.텍스처의 RGB 값을 그대로 적용합니다.예: 나무 문, 바닥 무늬 이미지1.2 Alpha Map (알파 맵)투명도 정보를 담고 있습니다.흰색 = 불투명 / 검정 = 완전 투명 / 회색 = 반투명1.3 Height Map (높이 맵)정점을 실제로 이동시켜 입체감을 표현합니다.세분화(Segments)가 많을수록 효과가 뚜렷합니다.1.4 Normal Map (노멀 맵)정점.. 2025. 7. 23.
09 Three.js 디버그 UI - lil-gui 사용법 Three.js 디버그 UI - lil-gui 사용법1. 디버그 UI의 중요성창의적인 프로젝트에서 핵심은 빠르고 유연하게 수정할 수 있어야 한다는 점입니다. 디자이너나 클라이언트가 실시간으로 색상, 위치, 속도 등을 조절할 수 있어야 더 나은 결과를 얻을 수 있습니다.2. lil-gui 소개 (vs dat.GUI)디버그 UI 종류: dat.GUI / lil-gui / control-panel / ControlKit / Uil / Tweakpane / Guify / Oui기존의 dat.GUI는 유지보수 부족으로 lil-gui가 대체하게 되었습니다. lil-gui는 작고 가볍고, 사용성이 좋으며 업데이트도 잘 이루어지고 있습니다.3. 설치 및 초기 설정npm install lil-guiimport GUI f.. 2025. 7. 23.
08 Three.js 기하학 구조 및 다양한 지오메트리(geometries) 정리 Three.js 기하학 구조 및 다양한 지오메트리1. 기하학(Geometry)이란?Three.js에서 기하 구조(Geometry)는 정점(Vertex)과 면(Face)으로 이루어진 3D 형태를 말합니다.정점(Vertex): 3D 공간상의 점면(Face): 일반적으로 정점 3개를 연결한 삼각형지오메트리는 메시(mesh)를 생성할 때도 사용되지만, 입자 시스템에도 활용됩니다.또한 정점의 위치 외에도 UV 좌표, 법선(normal) 등 다양한 데이터를 저장할 수 있습니다.2. 내장 기하학 종류Three.js는 다양한 내장 지오메트리를 제공합니다. 이들은 모두 BufferGeometry 클래스를 상속합니다.클래스 | 설명BoxGeometry정육면체PlaneGeometry직사각형 평면CircleGeometry원형.. 2025. 7. 23.
java, js/ts, python, c자료형별 대응 개념 | Java | JavaScript | TypeScript | Python | CList / ArrayList, ArrayListArrayArraylistT arr[], T*Tuplenew Pair() (없음 → class 필요)배열 대체 사용 ([a, b])[T1, T2] (타입 지원)tuplestruct 사용Dictionary / MapMapObject, MapRecord, Mapdictstruct + 배열 (직접 구현 필요)SetSetSet (ES6)Setset배열 + 중복 제거 로직Object / Structclass or POJOObject (동적 구조){ key: type }dict or classstructNull/None/Undefinednullnull, undefinednull, .. 2025. 7. 22.
07 반응형 캔버스와 전체 화면 모드 설정 가이드 Three.js – 반응형 캔버스와 전체 화면 모드 설정 가이드이 문서는 WebGL(Three.js) 캔버스()를 브라우저 화면 전체에 맞추고, 창 크기 변경 및 전체 화면 전환 기능을 구현하는 방법을 정리한 가이드입니다.1. 기본 해상도에서 뷰포트 맞춤으로초기 설정:const sizes = { width: window.innerWidth, height: window.innerHeight}기존 고정 해상도 800x600 대신 뷰포트 사이즈를 기준으로 캔버스를 생성하면, 다양한 화면 크기에 맞게 조정할 수 있습니다.2. CSS 초기화 및 WebGL 캔버스 스타일링/* 모든 요소 여백 제거 */* { margin: 0; padding: 0;}/* WebGL 캔버스를 화면 왼쪽 위에 고정.. 2025. 7. 22.
06 Three.js 카메라 타입 및 OrbitControls Three.js 카메라 타입 및 OrbitControls목적: 다양한 카메라 클래스를 이해하고, OrbitControls를 활용해 마우스 기반 카메라 제어를 구현합니다.1. Three.js 기본 카메라 계층 구조Camera 클래스는 추상 클래스로 직접 사용할 수 없으며, 공통 속성과 메서드를 자식 클래스가 상속받습니다. 주요 서브클래스:ArrayCamera – 분할 화면 렌더링 (멀티뷰)StereoCamera – 양안(스테레오) 렌더링 (VR/3D 안경)CubeCamera – 환경 맵 생성 (6방향 렌더링)OrthographicCamera – 직교 렌더링 (원근 제거)PerspectiveCamera – 원근 렌더링 (실제 카메라 시뮬레이션)이 가이드에서는 PerspectiveCamera와 Orthogra.. 2025. 7. 22.
05 Three.js 애니메이션 기초 Three.js 애니메이션 기초목표: requestAnimationFrame과 THREE.Clock을 활용해 프레임 기반 애니메이션을 구현하고, 필요 시 GSAP 라이브러리를 연동하는 방법을 익힙니다.1. 애니메이션 루프 구성Three.js는 한 번의 렌더링만으로 정적인 장면을 보여줍니다. 애니메이션을 적용하려면 아래와 같은 루프가 필요합니다.const tick = () => { // 1. 객체 위치/회전 업데이트 // 2. 씬 렌더링 renderer.render(scene, camera) // 3. 다음 프레임에 다시 호출 window.requestAnimationFrame(tick)}tick()requestAnimationFrame(callback)은 다음 프레임에 지정한 callback을 .. 2025. 7. 21.
04 객체 변환(위치, 크기, 회전, lookAt)과 그룹(Group) 사용법 Three.js – 객체 변환과 그룹화Three.js에서 객체를 변형하는 방법Three.js에서 Object3D를 상속한 대부분의 클래스(PerspectiveCamera, Mesh 등)는 다음과 같은 변환 속성을 갖습니다:position – 위치scale – 크기 조절rotation – 회전 (오일러)quaternion – 회전 (사원수; 고급 회전 방식)이 속성들은 내부적으로 "행렬(Matrix)"로 변환되어 GPU에 전달됩니다. 우리는 직접 행렬을 다루지 않아도 되고, 위 속성들을 조작하면 됩니다.좌표계와 단위Three.js의 기본 좌표계:X축: 오른쪽Y축: 위쪽Z축: 뒤쪽 (카메라가 Z+ 방향에서 Z0을 바라봄)단위는 자유롭게 설정 가능하며, 예를 들어 1 = 1미터처럼 설정하면 건축 등에 적합합니.. 2025. 7. 21.
Three.js Journey 03 Three.js를 배우고 싶어도 체계적으로 가르쳐주는 곳이 없어서 아래 강의를 듣기로 마음먹었다.가격은 95달러로 환전 수수료 포함 13,5천 원이다. Three.js Journey — Learn WebGL with Three.jsThe ultimate Three.js course whether you are a beginner or a more advanced developerthreejs-journey.com기초 CLIcd - 현재 디렉토리 변경// cd (directory name)ls - 현재 디렉토리 리스트보기pwd - 현재 디렉토리Three.js 첫 번째 장면 만들기 목표: Three.js를 이용해 화면에 첫 3D 큐브를 렌더링 해보자.Three.js 가져오기 (ES Module 방식)impo.. 2025. 7. 21.
쓸모 없지만 재미있는 MAC CLI 명령어 모음 1. cowsayASCII 아트의 소(또는 펭귄 등)가 말풍선으로 말을 해줍니다.brew install cowsay사용 예:cowsay Hello, Heeseong!결과 예: ___________________ ------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || ||2. cowthink말풍선이 아니라 "생각풍선"으로 표현함brew install cowsay # 설치 시 함께 포함됨cowthink I’m thinking...3. sl (Steam Locomotive)ls 오타를 친 사람들을 놀리기 위해 만든 장난 도구.. 2025. 7. 18.

티스토리툴바