챗지피티취미독학

Three.js를 React에서 다루다 보면 공통 기능들(카메라 조작, 환경맵, 텍스처 등)을 매번 직접 작성하는 것은 번거롭고 비효율적입니다. 이럴 때 사용하는 유용한 도구가 바로 @react-three/drei! 이 라이브러리는 OrbitControls, 텍스처 로더, 배경, 환경 조명 등을 컴포넌트 형태로 쉽게 사용할 수 있도록 제공합니다. 이번 차시에서는 Drei를 활용하여 Three.js 개발을 더욱 빠르고 간결하게 만드는 법을 배워봅니다. 📦 Drei 설치npm install @react-three/drei✍️ 예제 구성Canvas에 Drei의 OrbitControls 추가Stage, Environment로 조명과 배경 쉽게 설정useTexture로 텍스처 적용하기App.jsximport {..

Three.js는 WebGL 기반 3D 그래픽을 쉽게 구현할 수 있게 해주는 도구입니다. 하지만 React 환경에서는 DOM과 상태 관리를 고려한 컴포넌트 기반 접근이 필요합니다. 이때 사용하는 것이 바로 react-three-fiber. 이번 차시에서는 React에서 Three.js를 어떻게 통합하고, 기존 Three.js 코드가 어떻게 React 스타일로 변환되는지 단계별로 실습해봅니다. 🧱 설치 준비npx create-vite three-react-demo --template reactcd three-react-demonpm install three @react-three/fiber @react-three/dreinpm run dev📁 프로젝트 구조three-react-demo/├── src/│..

Three.js에서 셰이더는 정적인 효과만을 위한 도구가 아닙니다. 이번 13차시에서는 uniform을 통해 JavaScript에서 GLSL 셰이더로 시간(Time) 을 전달하고, 이를 기반으로 움직이는 색상 변화, 퍼지는 패턴 같은 애니메이션을 구현합니다. 직접 GLSL에서 sin(), cos() 함수를 조합해 시각적 효과를 연출하며, 인터랙티브한 3D 콘텐츠의 기본기를 다집니다. 📁 프로젝트 구조three-shader-animate/├── index.html└── main.js💡 핵심 개념: uniform이란?uniform: JavaScript에서 셰이더로 값을 전달하는 전역 변수.ShaderMaterial에서 uniforms 객체로 정의.시간, 색상, 마우스 위치 등을 실시간 반영 가능.🧪 전..

Three.js를 이용한 3D 웹 개발의 진정한 매력은 커스터마이징된 표현입니다. 이번 12차시에서는 ShaderMaterial을 사용하여 나만의 셰이더를 직접 작성하고 적용하는 방법을 배웁니다. GLSL을 활용해 정점(Vertex)과 픽셀(Fragment)을 다루는 기본 구조부터, 그라데이션이나 특수 효과를 구현하는 예제까지 단계적으로 실습합니다. Three.js의 기본 재질을 넘어서, 창의적인 3D 시각 효과의 세계로 함께 나아가 봅시다! 🟣 목차셰이더란?VertexShader & FragmentShader 구조ShaderMaterial 사용법커스텀 GLSL 셰이더 예제전체 예제 코드주요 개념 요약✨ 1. 셰이더란?셰이더(Shader)는 GPU에서 동작하는 작은 프로그램으로,모델의 정점(vertex..

Three.js로 3D 웹 콘텐츠를 만들다 보면, 외부에서 불러온 GLTF 모델에 애니메이션이 포함된 경우가 많습니다. 이번 11차시에서는 AnimationMixer를 사용해 이러한 애니메이션을 Three.js에서 자연스럽게 재생하는 방법을 배웁니다. Fox.glb 같은 실제 애니메이션 포함 GLTF 파일을 불러오고, 재생하고, 업데이트 루프에 통합하는 방법까지 단계별로 알아봅니다. Three.js의 강력한 3D 표현력과 상호작용을 극대화할 수 있는 기초 애니메이션 재생 기술을 익혀보세요! 🟣 목차GLTF 애니메이션 개념AnimationMixer 사용법GLTFLoader로 모델 로드 + 애니메이션 재생전체 예제 코드주의사항🔍 1. GLTF 애니메이션이란?GLTF 파일은 단순한 메시(mesh)뿐 아니라..