실전: 3D 갤러리

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 기본 씬 설정
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a2e);
scene.fog = new THREE.Fog(0x1a1a2e, 10, 30);

const camera = new THREE.PerspectiveCamera(
  60, window.innerWidth / window.innerHeight, 0.1, 100
);
camera.position.set(0, 2, 8);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

// 조명
const ambient = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambient);
const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(0, 8, 0);
spotLight.castShadow = true;
scene.add(spotLight);

// 바닥
const floor = new THREE.Mesh(
  new THREE.PlaneGeometry(20, 20),
  new THREE.MeshStandardMaterial({ color: 0x222233, roughness: 0.8 })
);
floor.rotation.x = -Math.PI / 2;
floor.receiveShadow = true;
scene.add(floor);

// 벽 생성
function createWall(w, h, pos, rot) {
  const wall = new THREE.Mesh(
    new THREE.PlaneGeometry(w, h),
    new THREE.MeshStandardMaterial({ color: 0x2a2a3e, side: THREE.DoubleSide })
  );
  wall.position.copy(pos);
  if (rot) wall.rotation.copy(rot);
  wall.receiveShadow = true;
  scene.add(wall);
}

createWall(20, 5, new THREE.Vector3(0, 2.5, -5));
createWall(10, 5, new THREE.Vector3(-10, 2.5, 0), new THREE.Euler(0, Math.PI / 2, 0));
createWall(10, 5, new THREE.Vector3(10, 2.5, 0), new THREE.Euler(0, -Math.PI / 2, 0));

// 이미지 프레임 생성
const loader = new THREE.TextureLoader();
const frames = [];

function createFrame(imageUrl, position) {
  const group = new THREE.Group();
  const frameMesh = new THREE.Mesh(
    new THREE.BoxGeometry(2.2, 1.7, 0.1),
    new THREE.MeshStandardMaterial({ color: 0xc0a060, metalness: 0.8, roughness: 0.3 })
  );
  frameMesh.castShadow = true;
  group.add(frameMesh);

  const imgMesh = new THREE.Mesh(
    new THREE.PlaneGeometry(1.9, 1.4),
    new THREE.MeshBasicMaterial({ map: loader.load(imageUrl) })
  );
  imgMesh.position.z = 0.06;
  imgMesh.userData.frameName = imageUrl;
  group.add(imgMesh);

  group.position.copy(position);
  scene.add(group);
  frames.push(imgMesh);
}

createFrame('/img/art1.jpg', new THREE.Vector3(-4, 2, -4.9));
createFrame('/img/art2.jpg', new THREE.Vector3(0, 2, -4.9));
createFrame('/img/art3.jpg', new THREE.Vector3(4, 2, -4.9));

// 클릭 감지
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
renderer.domElement.addEventListener('click', (e) => {
  mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const hits = raycaster.intersectObjects(frames);
  if (hits.length > 0) {
    console.log('Selected:', hits[0].object.userData.frameName);
  }
});

// 렌더 루프
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.target.set(0, 2, 0);

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();