조아마시

쓸모 있는 상세페이지 만들기

웹3D/threejs|R3F

[Three.js] Global variable

joamashi 2025. 1. 15. 13:41

const REVISION = '172'; // Three.js의 현재 버전 번호

// 마우스와 터치 이벤트를 처리하는 상수들
const MOUSE = { 
  LEFT: 0,        // 마우스 왼쪽 버튼
  MIDDLE: 1,      // 마우스 휠 클릭(가운데 버튼)
  RIGHT: 2,       // 마우스 오른쪽 버튼
  ROTATE: 0,      // 마우스 회전 동작
  DOLLY: 1,       // 줌 동작
  PAN: 2          // 이동 동작
}; 
const TOUCH = { 
  ROTATE: 0,      // 터치 회전 동작
  PAN: 1,         // 터치 이동 동작
  DOLLY_PAN: 2,   // 줌 + 이동 동작
  DOLLY_ROTATE: 3 // 줌 + 회전 동작
};

// 컬링(Culling) 옵션: 렌더링할 면 설정
const CullFaceNone = 0; // 컬링 없음 (모든 면 렌더링)
const CullFaceBack = 1; // 뒷면 컬링 (카메라에서 보이지 않는 면 제거)
const CullFaceFront = 2; // 앞면 컬링
const CullFaceFrontBack = 3; // 앞/뒷면 모두 컬링

// 그림자 맵핑 방법
const BasicShadowMap = 0; // 기본 그림자 맵(빠르지만 품질 낮음)
const PCFShadowMap = 1; // Percentage-Closer Filtering 그림자 맵(중간 품질)
const PCFSoftShadowMap = 2; // 부드러운 PCF 그림자 맵(높은 품질, 성능 비용 높음)
const VSMShadowMap = 3; // Variance Shadow Map(부드럽고 정확한 그림자 표현)

// 면 방향 설정: 모델의 렌더링 방향 지정
const FrontSide = 0; // 앞면만 렌더링
const BackSide = 1; // 뒷면만 렌더링
const DoubleSide = 2; // 앞/뒷면 모두 렌더링

// 블렌딩 모드: 색상 혼합 방식 설정
const NoBlending = 0; // 블렌딩 없음
const NormalBlending = 1; // 기본 블렌딩 (투명도 혼합)
const AdditiveBlending = 2; // 색상을 추가하여 밝기를 증가
const SubtractiveBlending = 3; // 색상을 빼서 어둡게
const MultiplyBlending = 4; // 색상을 곱하여 혼합
const CustomBlending = 5; // 사용자 정의 블렌딩

// 블렌딩 방정식: 두 색상의 혼합 방식을 정의
const AddEquation = 100; // 색상 합산
const SubtractEquation = 101; // 색상 차감
const ReverseSubtractEquation = 102; // 색상 반전 후 차감
const MinEquation = 103; // 두 색상의 최소값
const MaxEquation = 104; // 두 색상의 최대값

// 블렌딩 요소: 소스와 대상 색상의 가중치 설정
const ZeroFactor = 200; // 0 (가중치 없음)
const OneFactor = 201; // 1 (전체 가중치)
const SrcColorFactor = 202; // 소스 색상
const OneMinusSrcColorFactor = 203; // 소스 색상의 반전
const SrcAlphaFactor = 204; // 소스 알파 값
const OneMinusSrcAlphaFactor = 205; // 소스 알파 값의 반전
const DstAlphaFactor = 206; // 대상 알파 값
const OneMinusDstAlphaFactor = 207; // 대상 알파 값의 반전
const DstColorFactor = 208; // 대상 색상
const OneMinusDstColorFactor = 209; // 대상 색상의 반전
const SrcAlphaSaturateFactor = 210; // 소스 알파의 포화
const ConstantColorFactor = 211; // 상수 색상
const OneMinusConstantColorFactor = 212; // 상수 색상의 반전
const ConstantAlphaFactor = 213; // 상수 알파 값
const OneMinusConstantAlphaFactor = 214; // 상수 알파 값의 반전

// 깊이 테스트 비교 함수
const NeverDepth = 0; // 깊이 테스트 실패 (렌더링되지 않음)
const AlwaysDepth = 1; // 항상 통과
const LessDepth = 2; // 깊이가 작으면 통과
const LessEqualDepth = 3; // 깊이가 작거나 같으면 통과
const EqualDepth = 4; // 깊이가 같으면 통과
const GreaterEqualDepth = 5; // 깊이가 크거나 같으면 통과
const GreaterDepth = 6; // 깊이가 크면 통과
const NotEqualDepth = 7; // 깊이가 같지 않으면 통과

// 텍스처 매핑 방식: 텍스처가 표면에 매핑되는 방식
const UVMapping = 300; // 기본 UV 매핑
const CubeReflectionMapping = 301; // 큐브 반사 매핑 (환경 반사 효과)
const CubeRefractionMapping = 302; // 큐브 굴절 매핑 (투명 효과)
const EquirectangularReflectionMapping = 303; // 구형 반사 매핑
const EquirectangularRefractionMapping = 304; // 구형 굴절 매핑
const CubeUVReflectionMapping = 306; // 큐브 UV 반사 매핑

// 텍스처 래핑 모드
const RepeatWrapping = 1000; // 텍스처 반복
const ClampToEdgeWrapping = 1001; // 텍스처를 가장자리로 고정
const MirroredRepeatWrapping = 1002; // 텍스처 반복 및 반전

// 필터링 방식: 텍스처 샘플링 방법
const NearestFilter = 1003; // 가장 가까운 픽셀 색상 사용
const LinearFilter = 1006; // 선형 보간을 사용하여 부드럽게 샘플링

// 텍스처 포맷: 텍스처의 색상 데이터 포맷
const RGBFormat = 1022; // RGB (적녹청) 포맷
const RGBAFormat = 1023; // RGBA (알파 포함) 포맷

// 압축 텍스처 포맷
const RGB_S3TC_DXT1_Format = 33776; // S3TC 압축 텍스처 (DXT1)
const RGBA_S3TC_DXT1_Format = 33777; // S3TC 압축 텍스처 (DXT1 + 알파)
const RGBA_S3TC_DXT3_Format = 33778; // S3TC 압축 텍스처 (DXT3)
const RGBA_S3TC_DXT5_Format = 33779; // S3TC 압축 텍스처 (DXT5)

// 애니메이션 루프 모드
const LoopOnce = 2200; // 애니메이션 1회 재생
const LoopRepeat = 2201; // 애니메이션 반복 재생
const LoopPingPong = 2202; // 애니메이션 왕복 재생

// GLSL 버전
const GLSL1 = '100'; // GLSL 버전 1.0
const GLSL3 = '300 es'; // GLSL 버전 3.0 (ES)

// WebGL 좌표계
const WebGLCoordinateSystem = 2000; // WebGL 좌표계
const WebGPUCoordinateSystem = 2001; // WebGPU 좌표계
728x90

'웹3D > threejs|R3F' 카테고리의 다른 글

[R3F] Geometries 종류  (0) 2025.01.15
three.js 시작하기 전  (0) 2024.08.07