모듈러 디자인

<div class="mod-cap"></div>

.mod-cap{position:absolute;left:0;right:0;bottom:6%;text-align:center;font-size:clamp(9px,2.4vmin,13px);color:#f1f0eccc}

import * as THREE from 'three';
import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0d0d12);
const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
camera.position.set(3.6, 2.6, 5.4);
const geo = new RoundedBoxGeometry(0.92, 0.92, 0.92, 3, 0.07);
const colors = [0x5b5bf7, 0xf25c8a, 0x18c29c, 0xffb648];
const cubes = colors.map((c) => new THREE.Mesh(geo, new THREE.MeshStandardMaterial({ color: c, roughness: 0.5, metalness: 0.1 })));
cubes.forEach((m) => scene.add(m));
const key = new THREE.DirectionalLight(0xffffff, 2); key.position.set(4, 5, 4); scene.add(key);
scene.add(new THREE.AmbientLight(0xffffff, 0.55));
const TOWER = [[0,0,0],[0,1,0],[0,2,0],[0,3,0]];
const SHELF = [[-1.5,0,0],[-0.5,0,0],[0.5,0,0],[1.5,0,0]];
const cap = document.querySelector('.mod-cap');
let phase = 0;
function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
const CYCLE = 3200;
renderer.setAnimationLoop((t) => {
  const cyclePos = (t % (CYCLE * 2)) / CYCLE;
  const toTower = cyclePos < 1;
  const local = toTower ? cyclePos : cyclePos - 1;
  const ease = local < 0.5 ? 4 * local ** 3 : 1 - Math.pow(-2 * local + 2, 3) / 2;
  cubes.forEach((mesh, i) => {
    const from = toTower ? SHELF[i] : TOWER[i];
    const to = toTower ? TOWER[i] : SHELF[i];
    mesh.position.set(from[0] + (to[0] - from[0]) * ease, from[1] + (to[1] - from[1]) * ease, from[2] + (to[2] - from[2]) * ease);
    mesh.rotation.y = t * 0.0003;
  });
  cap.textContent = toTower ? 'same 4 modules → tower' : 'same 4 modules → shelf';
  camera.lookAt(0, 1, 0);
  renderer.render(scene, camera);
});