폴리프레임

FontLoader()는 Three.js에서 폰트 파일을 로드하여 3D 텍스트를 생성할 수 있게 해주는 로더입니다. 폰트 파일은 보통 JSON 형식으로 저장됩니다. Three.js의 typeface.js 예제에서 폰트 파일을 다운로드할 수 있습니다. 사용 예제는 아래와 같습니다.const loader = new THREE.FontLoader();loader.load('path/to/your/font.json', function (font) { // 폰트 로딩 후 텍스트 생성 const textGeometry = new THREE.TextGeometry('Hello, World!', { font: font, size: 80, height: 5, curveSegments: 12, ..

three.js 2025. 1. 8. 13:16

LoadingManager()는 파일 로딩을 관리하는 객체로, 다음과 같은 기능을 제공합니다:onLoad(): 로딩이 완료될 때 호출되는 콜백 함수.onProgress(): 로딩 진행 상황을 모니터링하는 콜백 함수.onError(): 로딩 오류가 발생했을 때 호출되는 콜백 함수.const manager = new THREE.LoadingManager();manager.onStart = function (url, itemsLoaded, itemsTotal) { console.log('Loading started: ' + url);};manager.onLoad = function () { console.log('All objects loaded');};manager.onProgress = function..

three.js 2025. 1. 8. 09:42

useLoader()다양한 종류의 로더를 사용하여 여러 가지 리소스를 로드할 수 있도록 해줍니다. TextureLoader: 이미지 텍스처를 로드합니다. 주로 3D 모델의 표면에 적용될 텍스처를 로드하는 데 사용됩니다.GLTFLoader: GLTF/GLB 파일 형식의 3D 모델을 로드합니다. 이 형식은 3D 모델 데이터와 애니메이션을 포함할 수 있는 효율적인 파일 형식입니다.FBXLoader: FBX 파일 형식의 3D 모델을 로드합니다. 이 형식은 주로 애니메이션이 포함된 모델을 로드하는 데 사용됩니다.OBJLoader: OBJ 파일 형식의 3D 모델을 로드합니다. 간단한 3D 모델을 로드하는 데 주로 사용됩니다.STLLoader: STL 파일 형식의 3D 모델을 로드합니다. 주로 3D 프린팅을 위해 사..

three.js 2024. 12. 25. 20:11

톤 맵핑은 컴퓨터 그래픽스에서 고역 동적 범위(High Dynamic Range, HDR) 이미지를 저역 동적 범위(Low Dynamic Range, LDR)로 변환하는 과정을 의미합니다. 이는 주로 디스플레이 장치의 한계로 인해 발생하는 것으로, 매우 밝은 빛과 어두운 그림자를 모두 표현하는 데 도움이 됩니다.HDR 이미지의 높은 명암비를 LDR 이미지로 변환하여 디스플레이에 적합하게 표현합니다.눈부신 빛과 깊은 어둠 사이의 명암을 더 잘 표현하여 시각적인 품질을 향상시킵니다.주요 톤 맵핑 종류 NoToneMapping: 톤 맵핑을 사용하지 않습니다. 입력값 그대로 디스플레이합니다.LinearToneMapping: 선형 톤 맵핑을 사용하여 매우 간단한 변환을 수행합니다.ReinhardToneMappin..

three.js 2024. 12. 25. 18:05

setHSL()HSL 색상 모델을 사용하여 색상을 설정합니다.이 메서드는 주어진 색조(hue), 채도(saturation), 밝기(lightness) 값을 사용하여 색상을 설정합니다. 기존 색상을 대체합니다. 사용은 color.setHSL(hue, saturation, lightness) -> 색조, 채도, 밝기const color = new THREE.Color();color.setHSL(0.5, 0.7, 0.5); // 색상을 설정offsetHSL()현재 색상의 HSL 값을 기준으로 오프셋(변화)을 적용합니다.이 메서드는 현재 색상의 HSL 값을 기준으로 주어진 오프셋 값을 적용하여 색상을 변경합니다. 기존 색상에 변화를 줍니다. 사용은 color.offsetHSL(hueOffset, saturati..

three.js 2024. 12. 25. 17:30

GLSL (OpenGL Shading Language)과 WGSL (WebGPU Shading Language)는 둘 다 GPU 셰이더를 작성하는 데 사용되는 언어입니다. 그러나 몇 가지 중요한 차이점이 있습니다.GLSL (OpenGL Shading Language)기본 언어: GLSL은 OpenGL과 관련된 셰이더 언어로, 오랫동안 사용되어 왔습니다.지원 API: GLSL은 WebGL, OpenGL, Vulkan 등 다양한 그래픽 API에서 사용됩니다.글로벌 상태: GLSL은 글로벌 상태를 많이 사용하며, 이는 모든 렌더링 작업에 적용되는 설정을 의미합니다.문법: GLSL은 C++와 유사한 문법을 가지고 있으며, 그래픽 프로그래밍에 필요한 다양한 기능을 제공합니다WGSL (WebGPU Shading L..

three.js 2024. 12. 14. 10:00

OrbitControls의 target과 maxPolarAngle은 Three.js와 **react-three/drei**에서 거의 동일한 방식으로 사용됩니다. react-three/drei는 Three.js의 기능을 React 컴포넌트로 감싸서 제공하는 라이브러리이기 때문에, props의 동작은 기본적으로 Three.js의 OrbitControls와 일치합니다.target OrbitControls의 target은 카메라가 초점을 맞출 지점을 설정합니다.카메라는 target으로 지정된 위치를 중심으로 궤도를 돌며 회전합니다. maxPolarAngle 카메라의 수직(위아래) 회전 범위를 제한합니다.maxPolarAngle는 카메라의 최대 극각을 라디안 값으로 설정하며, 수직 축을 기준으로 위쪽으로 올라갈 ..

three.js 2024. 12. 6. 08:09

이미지를 Box D 에만 texture 변수에 담어서 Mapping 하고, 나머지는 new THREE.Color() 처리해봅니다./* eslint-disable */import React, { useRef, useMemo, useState, useEffect } from "react";// import { useNavigate } from "react-router-dom";import { Canvas, useFrame } from "@react-three/fiber";import { Html } from "@react-three/drei";import { gsap } from "gsap"; // 애니메이션을 위해 gsap 사용import * as THREE from "three";import { numb..

three.js 2024. 11. 24. 17:52