cheoma/props.html at main · midagedev/cheoma · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>joseon · 소품 (props)</title>
<style>
  html, body { margin: 0; height: 100%; overflow: hidden; background: #cdd5db; }
  #app { width: 100%; height: 100%; }
  #ui {
    position: fixed; left: 12px; top: 12px; z-index: 10; display: flex; gap: 6px; flex-wrap: wrap;
    font: 13px/1 -apple-system, 'Apple SD Gothic Neo', sans-serif;
  }
  #ui a {
    padding: 7px 12px; border: 0; border-radius: 6px; cursor: pointer; text-decoration: none;
    background: rgba(20,24,28,.62); color: #fff; backdrop-filter: blur(3px);
  }
  #ui a.on { background: #c8452c; }
  #badge {
    position: fixed; left: 12px; bottom: 10px; z-index: 10;
    font: 12px/1.4 -apple-system, 'Apple SD Gothic Neo', sans-serif;
    color: rgba(31,27,24,.6); pointer-events: none; user-select: none;
  }
  .shot #ui, .shot #badge { display: none !important; }
</style>
<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.185.1/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.185.1/examples/jsm/"
  }
}
</script>
</head>
<body>
<div id="app"></div>
<div id="ui">
  <a data-set="temple" href="?set=temple">절</a>
  <a data-set="palace" href="?set=palace">궁</a>
  <a data-set="giwa" href="?set=giwa">기와집</a>
  <a data-set="choga" href="?set=choga">초가</a>
  <a data-set="common" href="?set=common">공용</a>
  <a data-set="all" href="?set=all">전체</a>
</div>
<div id="badge">joseon · 유형별 소품 라이브러리</div>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { buildProp, PROP_SETS, PROP_LABELS } from './src/props/index.js';

const q = new URLSearchParams(location.search);
const SHOT = q.get('shot') === '1';
const single = q.get('prop');
const set = q.get('set') || 'all';
const seed = parseInt(q.get('seed') || '7', 10);
if (SHOT) document.body.classList.add('shot');

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.05;
document.getElementById('app').appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xcdd5db);
scene.fog = new THREE.Fog(0xcdd5db, 40, 160);

const sun = new THREE.DirectionalLight(0xfff0dd, 2.6);
sun.position.set(18, 30, 20);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
sun.shadow.camera.left = -26; sun.shadow.camera.right = 26;
sun.shadow.camera.top = 26; sun.shadow.camera.bottom = -26;
sun.shadow.camera.far = 120;
sun.shadow.bias = -0.0001; sun.shadow.normalBias = 0.04;
scene.add(sun);
scene.add(new THREE.HemisphereLight(0xbdd0e4, 0x8a7a63, 0.95));

const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(400, 400),
  new THREE.MeshStandardMaterial({ color: 0xb5a893, roughness: 1 })
);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
scene.add(ground);

// 라벨 스프라이트(캔버스 텍스트)
function makeLabel(text) {
  const c = document.createElement('canvas');
  c.width = 256; c.height = 64;
  const g = c.getContext('2d');
  g.fillStyle = 'rgba(20,24,28,0.72)';
  g.beginPath(); g.roundRect(8, 12, 240, 40, 8); g.fill();
  g.fillStyle = '#fff';
  g.font = 'bold 28px "Apple SD Gothic Neo", sans-serif';
  g.textAlign = 'center'; g.textBaseline = 'middle';
  g.fillText(text, 128, 34);
  const tex = new THREE.CanvasTexture(c);
  tex.colorSpace = THREE.SRGBColorSpace;
  const spr = new THREE.Sprite(new THREE.SpriteMaterial({ map: tex, transparent: true }));
  spr.scale.set(2.4, 0.6, 1);
  return spr;
}

const box = new THREE.Box3();
const size = new THREE.Vector3();
const center = new THREE.Vector3();
const worldBox = new THREE.Box3().makeEmpty();   // 실제 배치 경계(카메라 프레이밍)

// 소품 하나를 배치: 바닥에 앉히고 라벨을 앞에 세움. 반환 bbox로 그리드 셀 크기 판단.
function place(name, x, z, withLabel) {
  const g = buildProp(name, { seed });
  scene.add(g);
  box.setFromObject(g); box.getSize(size); box.getCenter(center);
  // 바닥에 정렬 + 그리드 위치로 이동
  g.position.x += x - center.x;
  g.position.z += z - center.z;
  g.position.y += -box.min.y;
  box.setFromObject(g); worldBox.union(box);
  if (withLabel) {
    const lb = makeLabel(PROP_LABELS[name] || name);
    lb.position.set(x, 0.45, z + size.z / 2 + 0.9);
    scene.add(lb);
    worldBox.expandByPoint(lb.position);
  }
  return size.clone();
}

let names;
if (single) names = [single];
else if (set === 'all') names = Object.values(PROP_SETS).flat();
else names = PROP_SETS[set] || PROP_SETS.temple;

// 레이아웃
if (single) {
  place(single, 0, 0, !SHOT);
} else {
  const cols = Math.max(2, Math.ceil(Math.sqrt(names.length)));
  const cell = 4.4;
  const rows = Math.ceil(names.length / cols);
  names.forEach((name, i) => {
    const cx = (i % cols - (cols - 1) / 2) * cell;
    const cz = (Math.floor(i / cols) - (rows - 1) / 2) * cell;
    place(name, cx, cz, true);
  });
}

// 카메라 프레이밍 (실제 배치 경계에 맞춤)
const camera = new THREE.PerspectiveCamera(40, innerWidth / innerHeight, 0.1, 800);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.maxPolarAngle = Math.PI / 2 - 0.02;
worldBox.getSize(size); worldBox.getCenter(center);
// 대각 크기 기반 거리(여백 포함). tan(fov/2)로 화면에 들어오게.
const diag = Math.hypot(size.x, size.z, size.y);
const fov = camera.fov * Math.PI / 180;
const radius = (diag * 0.5) / Math.tan(fov / 2) * (single ? 1.1 : 0.66) + 2;
const el = single ? 0.36 : 0.48, az = single ? 0.62 : 0.62;
camera.position.set(
  center.x + radius * Math.cos(el) * Math.sin(az),
  center.y + radius * Math.sin(el),
  center.z + radius * Math.cos(el) * Math.cos(az)
);
controls.target.copy(center);
controls.update();

// 현재 세트 버튼 강조
if (!single) for (const a of document.querySelectorAll('#ui a')) a.classList.toggle('on', a.dataset.set === set);

addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

let frames = 0;
renderer.setAnimationLoop(() => {
  controls.update();
  renderer.render(scene, camera);
  if (++frames === 6) window.__SHOT_READY = true;
});
</script>
</body>
</html>