서브디비전 서피스

<div class="sub-caps"><span>cage · low-poly</span><span>subdivided · smooth</span></div>

.sub-caps{position:absolute;left:0;right:0;bottom:6%;display:flex;justify-content:space-around;font-size:clamp(8px,2.4vmin,12px);color:#dfe3ffcc;text-align:center;padding:0 4%}

import * as THREE from 'three';
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(0x0b0b14);
const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
camera.position.set(0, 0.6, 6.4);
const cageGeo = new THREE.IcosahedronGeometry(1.05, 1);
const cage = new THREE.Mesh(cageGeo, new THREE.MeshStandardMaterial({ color: 0x8ecbff, flatShading: true, roughness: 0.55, metalness: 0.05 }));
cage.add(new THREE.LineSegments(new THREE.EdgesGeometry(cageGeo), new THREE.LineBasicMaterial({ color: 0x0b0b14, transparent: true, opacity: 0.5 })));
cage.position.x = -1.7;
const smoothGeo = new THREE.IcosahedronGeometry(1.05, 4);
const smooth = new THREE.Mesh(smoothGeo, new THREE.MeshStandardMaterial({ color: 0xffb648, roughness: 0.45, metalness: 0.05 }));
smooth.position.x = 1.7;
scene.add(cage, smooth);
const key = new THREE.DirectionalLight(0xffffff, 1.7); key.position.set(3, 4, 5); scene.add(key);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  const r = t * 0.00025;
  cage.rotation.set(r * 0.5, r, 0);
  smooth.rotation.copy(cage.rotation);
  camera.lookAt(0, 0, 0);
  renderer.render(scene, camera);
});