유리 트랜스미션

import * as THREE from 'three';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.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(0x08060f);
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(0, 0.3, 4.6);

const pmrem = new THREE.PMREMGenerator(renderer);
scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;

const backdrop = new THREE.Mesh(
  new THREE.PlaneGeometry(18, 7, 12, 6),
  new THREE.MeshBasicMaterial({ vertexColors: true, side: THREE.DoubleSide })
);
const posAttr = backdrop.geometry.attributes.position;
const colors = [];
const c1 = new THREE.Color(0xff5c8a), c2 = new THREE.Color(0x5b5bf7), c3 = new THREE.Color(0x18c29c);
for (let i = 0; i < posAttr.count; i++) {
  const x = posAttr.getX(i), y = posAttr.getY(i);
  const mixed = c1.clone().lerp(c2, x / 18 + 0.5).lerp(c3, y / 7 + 0.5);
  colors.push(mixed.r, mixed.g, mixed.b);
}
backdrop.geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
backdrop.position.z = -1.6;
scene.add(backdrop);

const glass = new THREE.Mesh(
  new THREE.IcosahedronGeometry(1.15, 4),
  new THREE.MeshPhysicalMaterial({
    roughness: 0.05,
    metalness: 0,
    transmission: 1,
    thickness: 1.2,
    ior: 1.5,
    envMapIntensity: 1,
    clearcoat: 1,
    clearcoatRoughness: 0.1,
  })
);
scene.add(glass);

function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  glass.rotation.y = t * 0.00035;
  glass.rotation.x = Math.sin(t * 0.0002) * 0.3;
  renderer.render(scene, camera);
});