본문 바로가기

전체 글459

24 Environment Map Environment MapsThree.js에서 Environment Map(환경 맵) 은 장면 전체에 사실적인 조명과 반사를 적용하는 데 사용됩니다. 이 문서는 다양한 환경 맵 형식, 로딩 및 적용 기법, 생성 도구까지 정리한 가이드입니다.🔧 Setup모델: GLTF Sample Models에서 제공하는 Flight Helmet경로: /static/models/FlightHelmet/glTF/FlightHelmet.gltf초기 장면: 하얀 TorusKnot, lil-guiimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';const gltfLoader = new GLTFLoader();// 모델 로딩 및 장면에 추가gltfLoa.. 2025. 7. 31.
23 Blender 햄버거 모델링 (Blender 사용법 정리) Blender 햄버거 모델링 수업 정리들어가며3D 모델을 임포트하는 방법을 배웠다면, 이제 Blender를 이용해 직접 모델을 만드는 과정을 배워볼 차례입니다. 이 수업에서는 햄버거 모델을 Blender에서 직접 만들고, Three.js에서 사용하는 glTF 포맷으로 익스포트하는 전 과정을 다룹니다.Blender 선택 이유Blender 외에도 다양한 3D 소프트웨어(Cinema 4D, Maya, 3DS Max, ZBrush 등)가 있지만, 다음 이유로 Blender를 사용합니다:무료높은 성능모든 주요 OS 지원강력한 기능들대규모 커뮤니티2.8 이후로 UI가 쉬워짐Blender의 모든 기능을 익히는 건 이 수업의 목표가 아니며, 기본기를 배우고 친숙해지는 것이 우선입니다.Blender 다운로드Blender.. 2025. 7. 30.
22 Raycaster와 MouseEvent Three.js Raycaster 정리 및 보완 설명1. Raycaster란?Raycaster는 특정 위치에서 특정 방향으로 광선(ray) 을 쏘고, 그 광선과 어떤 3D 객체가 교차하는지 판단하는 도구입니다.활용 예:플레이어 앞에 벽이 있는지 감지총알(광선)이 적을 맞췄는지 체크마우스로 클릭하거나 호버했을 때 어떤 객체가 있는지 탐지2. Raycaster 생성 및 기본 설정const raycaster = new THREE.Raycaster();const rayOrigin = new THREE.Vector3(-3, 0, 0); // 광선의 시작점const rayDirection = new THREE.Vector3(10, 0, 0); // 광선의 방향rayDirection.normalize(); // 방향.. 2025. 7. 29.
21 모델 불러오기(Imported models) Three.js에서 GLTF 모델 불러오기1. 개요Three.js에서는 기본적인 도형(primitive geometry)을 쉽게 생성할 수 있지만, 복잡한 형태의 3D 모델을 만들기에는 한계가 있습니다. 이럴 때는 외부의 3D 모델링 도구에서 만든 모델을 사용하는 것이 일반적입니다.다양한 포맷 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 file formats used by computers, organized by t.. 2025. 7. 29.
20 물리엔진(Physics) Three.js + Cannon.js 물리 엔진 통합 가이드소개WebGL 기반 Three.js 프로젝트에 물리 엔진을 추가하면, 물체가 충돌하고, 떨어지고, 튕기며 현실적인 인터랙션을 만들 수 있습니다. 이 문서는 Three.js와 함께 Cannon.js를 사용하는 방법을 학습 목적으로 정리한 가이드입니다.포트폴리오 참고: bruno-simon.com왜 물리 엔진이 필요한가?단순한 Raycaster 기반 물리 효과도 가능하지만, 마찰, 탄성, 질량, 제약 조건 등 현실적인 시뮬레이션에는 전문 라이브러리가 필요합니다.물리 엔진 종류주요 3D 물리 엔진Ammo.jsBullet(게임 엔진) 기반, WebAssembly 지원, 성능 우수, 가장 무거움Cannon.js사용 간편, Three.js 튜토리얼과 궁합 .. 2025. 7. 29.
19 스크롤 기반 애니메이션 Three.js를 이용한 HTML 배경과 패럴랙스 스크롤 통합 구현소개WebGL로 구성된 인터랙티브한 콘텐츠는 훌륭하지만, 종종 기존의 HTML 페이지와 통합하여 배경 효과로 활용하고 싶을 때가 있습니다. 이 문서는 Three.js를 활용해 HTML 페이지 스크롤과 커서 위치에 따라 반응하는 배경 효과를 구현하는 방법을 설명합니다.주요 구현 목표는 다음과 같습니다:카메라가 스크롤을 따라가도록 구현마우스 위치에 따른 패럴랙스 효과 적용특정 섹션에 도달 시 애니메이션 트리거기본 설정OrbitControls 제거: 스크롤 기반 카메라 제어를 위해 마우스 회전 기능 비활성화lil-gui 적용: 재질 색상 조정용 UI 제공const gui = new GUI();const parameters = { materia.. 2025. 7. 28.
18 Galaxy Generator Galaxy GeneratorIntroduction이제 particles를 사용할 수 있으니, 멋진 은하(galaxy)를 만들어볼 수 있습니다.하지만 하나의 은하만 만드는 대신, 매번 다른 은하를 생성할 수 있는 은하 생성기(galaxy generator) 를 만들어보겠습니다.사용자가 다양한 파라미터를 조절할 수 있도록 하기 위해 lil-gui를 사용할 것입니다.Setup시작 프로젝트에는 단순히 장면(scene) 중앙에 큐브 하나만 존재합니다.기본 작동 여부를 확인하기 위한 구조입니다.Base Particles먼저 큐브를 제거하고 generateGalaxy 함수를 생성합니다.이 함수는 기존 은하가 존재하면 제거하고 새로운 은하를 생성합니다./** * Galaxy */const generateGalaxy .. 2025. 7. 28.
17 Particle(Points) Three.js Particles🎈 Particles 소개파티클은 이름 그대로 작은 입자입니다. 별, 연기, 비, 불, 먼지 등의 다양한 효과에 활용됩니다.수십만 개의 파티클을 실시간으로 렌더링할 수 있는 장점이 있지만, 각 파티클은 카메라를 항상 바라보는 평면(plane, 2개의 삼각형)으로 구성됩니다.각 정점에 파티클 생성됨.🛠️ 파티클 기본 구조파티클도 Mesh처럼 생성하지만, 대신 Points 클래스를 사용해야 하며, 재질도 PointsMaterial을 사용해야 합니다.const particlesGeometry = new THREE.SphereGeometry(1, 32, 32)const particlesMaterial = new THREE.PointsMaterial({ size: 0.02, .. 2025. 7. 28.
16 Haunted House 프로젝트 Haunted House 프로젝트 (Three.js Journey)이 문서는 Three.js Journey의 "Haunted House" 레슨 내용을 요약한 것입니다. 코드는 그대로 보존하며, 설명은 자연스러운 한국어로 번역했습니다. 일부 코드에는 주석을 추가하여 이해를 돕습니다.개요이 레슨에서는 지금까지 배운 내용을 실제로 적용하여 유령의 집(haunted house) 장면을 구성합니다.프리미티브 도형만 사용하며,Poly Haven의 PBR 텍스처를 적용하고,안개, 하늘, 그림자 등 다양한 시각 효과를 추가합니다.Timer 클래스기존 Clock의 버그를 해결한 Timer 클래스 사용:import { Timer } from 'three/addons/misc/Timer.js';const timer = ne.. 2025. 7. 26.
15 그림자(Shadow) Three.js 그림자 처리 가이드 (Shadow Rendering Guide)소개Three.js에서 그림자는 3D 공간의 사실감을 높여주는 중요한 요소입니다. 이 가이드에서는 그림자 유형부터 구현 방식, 최적화 방법까지 실용적인 코드와 함께 설명합니다.1. 그림자의 유형유형설명Core Shadow물체의 뒤쪽이 어둡게 표현되는 내부 그림자Drop Shadow한 물체가 다른 물체에 드리우는 외부 그림자Baked Shadow미리 렌더링된 그림자를 텍스처에 저장해 적용하는 방식Fake Shadow단순한 텍스처를 이용해 가짜 그림자처럼 보이게 하는 방식2. 그림자 활성화const renderer = new THREE.WebGLRenderer({ canvas: canvas });renderer.shadowMap... 2025. 7. 26.
14 조명(Light) Three.js 조명(Light) 가이드이 문서는 Three.js에서 사용할 수 있는 다양한 조명 유형과 특징, 성능, 도우미 사용법까지 정리한 참고 자료입니다. 실습 예제와 함께 주요 조명 클래스들을 설명합니다.1. 기본 개념Three.js에서 조명을 추가하는 방법은 간단합니다.const light = new THREE.SomeLightType(color, intensity)scene.add(light)다양한 조명 타입마다 고유의 속성과 시각적 효과가 있습니다.MeshStandardMaterial이나 MeshPhysicalMaterial과 같이 조명 반응형 머티리얼을 사용해야 효과를 확인할 수 있습니다.2. 주요 조명 타입AmbientLight (환경광)const ambientLight = new TH.. 2025. 7. 26.
13 Go Live Three.js 프로젝트 배포 가이드 (Vercel 기반)이 문서는 Three.js 프로젝트를 웹에 배포하는 과정을 정리한 가이드입니다.정적 호스팅부터 Vercel과 같은 최신 플랫폼까지 다양한 방법을 소개합니다.1. 소개이제 여러분이 만든 Three.js 작품을 친구, 가족, 그리고 세상과 공유할 시간입니다.단순한 스크린샷이나 영상보다 인터랙티브 버전이 훨씬 효과적입니다.2. 전통적인 방식: 정적 파일 직접 업로드빌드 수행npm run buildpackage.json > scripts > build 명령 실행/dist 폴더 생성됨 → HTML, CSS, JS, 텍스처 등 웹에 필요한 파일 포함FTP 업로드생성된 /dist 폴더 내 파일을 FTP로 웹 호스팅 서버에 업로드새로 변경 시마다 다시 npm r.. 2025. 7. 23.

티스토리툴바