텍스처와 머티리얼

import * as THREE from 'three';

// TextureLoader로 이미지 텍스처 로딩
const loader = new THREE.TextureLoader();

// 단일 텍스처 로드
const colorMap = loader.load('/textures/brick_color.jpg');

// 텍스처를 머티리얼에 적용
const material = new THREE.MeshStandardMaterial({
  map: colorMap,           // 색상 텍스처 (기본)
  metalness: 0.1,
  roughness: 0.8,
});

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(2, 2, 2),
  material
);
scene.add(cube);

const loader = new THREE.TextureLoader();

// 여러 텍스처 맵을 조합한 PBR 머티리얼
const pbrMaterial = new THREE.MeshStandardMaterial({
  map: loader.load('/textures/stone_color.jpg'),          // 색상 맵
  normalMap: loader.load('/textures/stone_normal.jpg'),    // 법선 맵 (입체감)
  roughnessMap: loader.load('/textures/stone_rough.jpg'),  // 거칠기 맵
  aoMap: loader.load('/textures/stone_ao.jpg'),            // 앰비언트 오클루전
  displacementMap: loader.load('/textures/stone_disp.jpg'),// 변위 맵
  displacementScale: 0.1,
});

const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(1, 64, 64),
  pbrMaterial
);
scene.add(sphere);

// 텍스처 반복 설정
const texture = loader.load('/textures/tile.jpg');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(4, 4);

// 환경 맵(Environment Map)으로 반사 효과
const cubeTextureLoader = new THREE.CubeTextureLoader();
const envMap = cubeTextureLoader.load([
  '/textures/env/px.jpg', '/textures/env/nx.jpg',
  '/textures/env/py.jpg', '/textures/env/ny.jpg',
  '/textures/env/pz.jpg', '/textures/env/nz.jpg',
]);

scene.environment = envMap;

const chromeMatl = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 1.0,
  roughness: 0.05,
  envMap: envMap,
  envMapIntensity: 1.0,
});

const chromeSphere = new THREE.Mesh(
  new THREE.SphereGeometry(1, 32, 32),
  chromeMatl
);
scene.add(chromeSphere);