PBR material

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(0x14141f);
const pmrem = new THREE.PMREMGenerator(renderer);
scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
const camera = new THREE.PerspectiveCamera(40, 1, 0.1, 100);
camera.position.set(0, 0.4, 8.5);
const ROWS = 3, COLS = 5;
const group = new THREE.Group();
for (let row = 0; row < ROWS; row++) {
  for (let col = 0; col < COLS; col++) {
    const metalness = row / (ROWS - 1);
    const roughness = col / (COLS - 1);
    const mat = new THREE.MeshStandardMaterial({ color: 0xc9702e, metalness, roughness });
    const mesh = new THREE.Mesh(new THREE.SphereGeometry(0.55, 48, 48), mat);
    mesh.position.set((col - (COLS - 1) / 2) * 1.35, (row - (ROWS - 1) / 2) * 1.35, 0);
    group.add(mesh);
  }
}
scene.add(group);
const light = new THREE.DirectionalLight(0xffffff, 1.2);
light.position.set(3, 4, 5);
scene.add(light);
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.00015) * 0.35;
  renderer.render(scene, camera);
});