로우폴리

<span class="lp-cap">low poly · flat shading + vertex color</span>

.lp-cap{position:absolute;left:0;right:0;bottom:5%;text-align:center;font-size:clamp(9px,2.4vmin,12px);color:#dfe3ffcc}

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(0x0d0d16);
const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
camera.position.set(0, 0.6, 5.6);

let geo = new THREE.IcosahedronGeometry(1.5, 1);
geo = geo.toNonIndexed();
const pos = geo.attributes.position;
const colors = new Float32Array(pos.count * 3);
const c = new THREE.Color();
for (let f = 0; f < pos.count; f += 3) {
  c.setHSL(0.52 + Math.random() * 0.22, 0.65, 0.42 + Math.random() * 0.22);
  for (let v = 0; v < 3; v++) colors.set([c.r, c.g, c.b], (f + v) * 3);
}
geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
const mesh = new THREE.Mesh(geo, new THREE.MeshStandardMaterial({ vertexColors: true, flatShading: true, roughness: 0.55, metalness: 0.05 }));
scene.add(mesh);
const key = new THREE.DirectionalLight(0xffffff, 1.8); key.position.set(3, 4, 5); scene.add(key);
scene.add(new THREE.AmbientLight(0xffffff, 0.55));

function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  mesh.rotation.y = t * 0.00022;
  mesh.rotation.x = Math.sin(t * 0.00014) * 0.25;
  renderer.render(scene, camera);
});