환경 맵

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();
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(0, 0.6, 6);
const pmrem = new THREE.PMREMGenerator(renderer);
const envTex = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
scene.environment = envTex;
scene.background = envTex;
scene.backgroundBlurriness = 0.35;
const group = new THREE.Group();
const knot = new THREE.Mesh(
  new THREE.TorusKnotGeometry(1.05, 0.34, 180, 24),
  new THREE.MeshStandardMaterial({ color: 0xffffff, metalness: 1, roughness: 0.12 })
);
group.add(knot);
scene.add(group);
function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  group.rotation.y = t * 0.00028;
  group.rotation.x = Math.sin(t * 0.00018) * 0.25;
  renderer.render(scene, camera);
});