컬러·소재·마감(CMF)

<div class="cmf-caps"><span>gloss ABS</span><span>soft-touch TPE</span><span>brushed aluminum</span></div>

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

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(40, 1, 0.1, 100);
camera.position.set(0, 0.5, 7.2);
const geo = new RoundedBoxGeometry(1.15, 1.7, 0.55, 4, 0.16);
const mats = [
  new THREE.MeshPhysicalMaterial({ color: 0xe0393e, roughness: 0.12, metalness: 0.05, clearcoat: 1, clearcoatRoughness: 0.1 }),
  new THREE.MeshStandardMaterial({ color: 0x8fae94, roughness: 0.92, metalness: 0 }),
  new THREE.MeshStandardMaterial({ color: 0xb9bec4, roughness: 0.32, metalness: 0.92 }),
];
const group = new THREE.Group();
mats.forEach((m, i) => {
  const mesh = new THREE.Mesh(geo, m);
  mesh.position.x = (i - 1) * 1.9;
  group.add(mesh);
});
scene.add(group);
const key = new THREE.DirectionalLight(0xffffff, 2.2); key.position.set(3, 4, 5); scene.add(key);
const rim = new THREE.DirectionalLight(0x8fb0ff, 0.8); rim.position.set(-4, -2, -3); scene.add(rim);
scene.add(new THREE.AmbientLight(0xffffff, 0.45));
function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  group.rotation.y = Math.sin(t * 0.00035) * 0.55;
  group.children.forEach((m) => { m.rotation.y = t * 0.0002; });
  camera.lookAt(0, 0, 0);
  renderer.render(scene, camera);
});