본문 바로가기

전체 글459

61 Portal Scene React Three Fiber – Portal Scene 재구현1. Dark Background (어두운 배경): 씬(Scene)의 특정 속성에 색상 적용 가능attach="background": 씬의 배경색을 지정2. 모델 로딩 (useGLTF)import { useGLTF } from '@react-three/drei';const { nodes } = useGLTF('./model/portal.glb');nodes: Blender에서 Export한 각 파트의 이름별 geometry/transform 보관portal.glb 내부 구성nodes.baked → 메인 베이크 모델nodes.poleLightA, nodes.poleLightB → 기둥 조명nodes.portalLight → 포털3. Baked.. 2025. 8. 18.
60 3D Text React Three Fiber – 3D TextText3D, Center 같은 drei 헬퍼 사용Matcap 머티리얼 활용Donut 100개 랜덤 생성 및 최적화애니메이션 (useFrame) 적용1. 기본 환경 설정export default function Experience() { return ( {/* 기본 텍스트 (폰트 필요) */} HELLO R3F );}: drei 제공, 내부적으로 TextGeometry 사용font="./fonts/helvetiker_regular.typeface.json": JSON 폰트 지정: 기본적으로 법선 기반 머티리얼2. 텍스트 중앙 정렬 (Center) HEL.. 2025. 8. 18.
59 Load models(GLTF 모델 로딩과 애니메이션) GLTF 모델 로딩과 애니메이션1. 기본 환경 구성export default function Experience() { return ( {/* 성능 모니터링 UI */} {/* 카메라 이동 가능 */} {/* 광원 설정 */} {/* 그림자 받는 바닥 */} );}: FPS 및 렌더링 상태 체크.: 마우스로 카메라 이동 가능.castShadow, receiveShadow: 그림자 활성화.2. GLTF 모델 로딩 (useLoader)import { useLoader } from '@react-three/fiber';import { GLTFLoader } from.. 2025. 8. 18.
58 R3F Environment and Staging R3F 환경(Background · Lights · Shadows · Sky · Environment · Stage)1. 개요기본 씬(구/큐브/바닥)에서 시작해 배경색, 라이트/헬퍼, 여러 그림자 방식, 하늘(Sky), Environment Map(HDRI/프리셋/커스텀), Stage(원샷 세팅) 를 다룹니다.성능 확인용으로 (r3f-perf), 카메라 제어는 사용을 전제합니다.2. 배경 색(Background) 바꾸는 4가지2-1) CSS로 페이지 배경 지정/* 설계 의도: Canvas는 기본 투명 → 페이지 배경으로 색 지정 */html,body,#root { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:.. 2025. 8. 16.
정적 렌더링을 통해 원하는 시기에만 frame 갱신하기 (frameloop="demand") 패턴 1) 호버 중에만 60fps로 회전/렌더import { Canvas, useThree } from '@react-three/fiber'import React from 'react'function InteractiveBox(): JSX.Element { const { invalidate } = useThree() // 역할: 한 프레임만 다시 그리기 const ref = React.useRef(null) // 상태: 호버 여부 const [hovered, setHovered] = React.useState(false) // 호버 중에만 60fps 루프 구동 React.useEffect(() => { if (!hovered) return let raf = 0 let last .. 2025. 8. 16.
SVG 이해하기 SVG 로드맵1단계. 기본 이해SVG 정의, 래스터와 벡터 차이 태그 기본 속성 (width, height, viewBox)좌표계와 단위기본 도형(, 등)2단계. Path 문법 (핵심)M, L, H/V, C, Q, A, Z절대/상대 좌표다양한 도형/하트/곡선 예제3단계. 스타일링fill, stroke, stroke-widthstroke-linecap, stroke-linejoin, stroke-dasharrayCSS 적용 방식, opacity와 레이어 개념4단계. 좌표 변환과 레이아웃transform="translate/rotate/scale" 그룹 태그viewBox, preserveAspectRatio (반응형 핵심)5단계. 텍스트와 심화 요소, , + (재사용 구조)Gradient, Patter.. 2025. 8. 16.
57 R3F Debug R3F 디버깅 & 모니터링 (StrictMode · React DevTools · Leva · r3f-perf)1. 개요목표: 오류를 빨리 찾고, 원인 파악 시간을 줄이며, 프레임 드랍의 이유를 추적할 수 있는 작업 환경을 만든다.도구 구성React 쪽: StrictMode, React Developer Tools(브라우저 확장)R3F 쪽: Leva(Debug UI), r3f-perf(실시간 성능 패널)기본 씬: Sphere, Cube, 녹색 Floor(Plane), @react-three/drei 설치되어 있고 카메라는 로 조작.2. StrictMode — 리액트 잠재 버그 조기 경고왜 필요한가잠재적 문제를 개발 중에 경고로 알려준다: Unused import, 무한 렌더 루프, useEffect 누락.. 2025. 8. 15.
56 Drei R3F + drei Helpers1. 개요R3F는 Three.js를 선언형(Declarative) 방식으로 다루게 해 줍니다.커뮤니티에서 만든 다수의 helper 컴포넌트/훅이 @react-three/drei로 모여 있어, 카메라 제어, 지오메트리, 포스트 프로세싱, HTML 오버레이, 로더, 환경 설정, 수학 유틸 등을 손쉽게 붙일 수 있습니다.모든 것을 깊게 테스트할 필요는 없지만, 무엇이 가능한지를 알아두면 재발명을 피하고 개발 속도를 크게 올릴 수 있습니다.2. 기본 세팅씬 요소: Sphere, Cube, Floor(Plane)라이트: DirectionalLight, AmbientLight카메라 제어: 이후 섹션에서 (drei) 로 교체// 설계 의도: R3F에서 three.js의 명령형 코드를 .. 2025. 8. 15.
55 R3F Application 기초 React Three Fiber(R3F)1. 개요Three.js를 다뤄보신 분들이라면 아시겠지만, 순수 Three.js로 프로젝트를 구성할 때는 다음과 같은 흐름을 직접 작성해야 합니다.// Three.js 기본 구성 예시import * as THREE from 'three'const scene = new THREE.Scene()const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)const renderer = new THREE.WebGLRenderer()renderer.setSize(window.innerWidth, window.innerHeight)document.body.appen.. 2025. 8. 15.
53, 54 React와 React Three Fiber React와 React Three Fiber(R3F) 개요1. 개요지금까지는 Three.js를 순수 JavaScript 환경에서 사용하여 웹 애플리케이션을 만들었습니다. 그러나 실제 개발에서는 React와 같은 프레임워크 환경에 Three.js를 통합해야 하는 경우가 많습니다.React는 초기 진입 장벽이 있지만, 구조적 개발과 상태 관리 측면에서 Three.js 프로젝트를 훨씬 효율적으로 만들 수 있습니다.2. React란?React는 UI(User Interface) 생성을 위한 라이브러리입니다. JSX라는 HTML과 유사한 태그 기반 언어를 사용해 UI를 작성하며, 데이터가 변경되면 UI가 자동으로 갱신됩니다(데이터 바인딩).React의 특징JSX 사용: HTML과 유사한 문법을 사용해 UI를 작성.. 2025. 8. 11.
49 Blender에서 장면 만들기 🎨 Three.js 베이킹 및 Blender 통합 워크플로우 기능 정리✅ 베이킹(Baking)이란?3D 씬에서 조명, 그림자, 반사, 앰비언트 오클루전 등의 계산 결과를 미리 텍스처에 굽는(static texture로 bake하는) 작업을 말한다.🔍 이때 생성된 텍스처는 이후 실시간 렌더링 시 조명 계산 없이 바로 사용된다.→ 퍼포먼스는 뛰어나지만, 동적 조명 불가, 정적인 씬만 가능한 제한이 있다.🟩 베이킹의 장점 vs 단점장점 | 단점퍼포먼스가 훨씬 좋다조명이 고정되어 동적으로 바꿀 수 없다저사양 장치에서도 고품질 조명 표현 가능베이킹 작업 시간이 오래 걸림지오메트리가 단순해지고 GPU 로딩이 빠름다양한 오브젝트 → 다양한 텍스처 필요Three.js에 가져오기 쉬움UV 언래핑 등 추가 작업 필요.. 2025. 8. 7.
48 3D 위치에 HTML 요소 고정하기 (HTML과 WebGL 혼합) Three.js에서 3D 위치에 HTML 요소 고정하기 (HTML과 WebGL 혼합)3D 장면 위에 HTML로 만든 인터랙티브한 정보 포인트(Interest Point) 를 부착하고, 3D 객체와 함께 카메라 이동 시 따라다니도록 구현합니다. 이 방식은 WebGL 요소와 HTML UI를 혼합해서 사용할 때 유용하지만 성능에 주의해야 합니다.1. HTML 구조 설정 1 Lorem ipsum... .point: 모든 포인트에 공통적으로 적용.point-0, .point-1...: 각 포인트 개별 제어를 위한 클래스.label: 항상 보이는 작은 번호 원.text: 마우스를 올리면 나타나는 설명 텍스트2. CSS 스타일링기본 포지션.point { position: absolute; top: 50%.. 2025. 8. 7.

티스토리툴바