Sky Shader

<!--
  说明：Sky 用大气散射模型算出天光，太阳高度与浑浊度都能实时调整
  核心逻辑：物体的 Sky 着色器里 sunPosition 决定太阳方位，其余参数控制大气状态
  依赖：three.js 0.160.0、OrbitControls、Sky · jsDelivr CDN（ESM + importmap）
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>天空着色器</title>
<style>
  html,body{height:100%;margin:0;background:#05080c}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#e6e8ec}
  .bar{flex:0 0 auto;padding:8px 12px;background:#161b22;border-bottom:1px solid #252c36;
       display:flex;gap:12px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600;font-variant-numeric:tabular-nums}
  .bar input[type=range]{width:110px;accent-color:#4f9ef8}
  .bar .sp{flex:1 1 auto}
  #stage{flex:1 1 auto;min-height:0;position:relative}
  #stage canvas{display:block}
</style>
</head>
<body>
<div class="bar">
  <span>太阳高度 <b id="ev">6</b> °</span>
  <label>elevation <input type="range" id="el" min="-4" max="60" step="1" value="6"></label>
  <span>浑浊度 <b id="tv">8</b></span>
  <label>turbidity <input type="range" id="tu" min="1" max="20" step="1" value="8"></label>
  <span>瑞利 <b id="rv">2.2</b></span>
  <label>rayleigh <input type="range" id="ra" min="0.2" max="4" step="0.1" value="2.2"></label>
  <span class="sp"></span>
  <span>拖拽旋转 · 滚轮缩放</span>
</div>
<div id="stage"></div>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  }
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { Sky } from 'three/addons/objects/Sky.js';

const stage = document.getElementById('stage');
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(stage.clientWidth, stage.clientHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.5;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(50, stage.clientWidth / stage.clientHeight, 0.1, 2000);
camera.position.set(0, 12, 60);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 4, 0);
controls.enableDamping = true;
controls.maxPolarAngle = Math.PI * 0.495;
controls.maxDistance = 200;
controls.update();

const sky = new Sky();
sky.scale.setScalar(4500);
scene.add(sky);

const uniforms = sky.material.uniforms;
uniforms['turbidity'].value = 8;
uniforms['rayleigh'].value = 2.2;
uniforms['mieCoefficient'].value = 0.005;
uniforms['mieDirectionalG'].value = 0.78;

const sun = new THREE.Vector3();
let elevation = 6;
let azimuth = 165;

function updateSun() {
  const phi = THREE.MathUtils.degToRad(90 - elevation);
  const theta = THREE.MathUtils.degToRad(azimuth);
  sun.setFromSphericalCoords(1, phi, theta);
  uniforms['sunPosition'].value.copy(sun);

  hemi.color.setHSL(0.58, 0.5, Math.max(0.2, 0.55 - Math.abs(elevation) * 0.006));
  sunLight.position.copy(sun).multiplyScalar(120);
}

/* 地面与几根柱子，用来看太阳角度对光照方向的影响 */
const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(1200, 1200),
  new THREE.MeshStandardMaterial({ color: 0x2a2f33, roughness: 1 })
);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

const hemi = new THREE.HemisphereLight(0x99bbdd, 0x20242a, 0.7);
scene.add(hemi);

const sunLight = new THREE.DirectionalLight(0xfff0d0, 2.4);
scene.add(sunLight);

const pillarMat = new THREE.MeshStandardMaterial({ color: 0x8a9199, roughness: 0.5, metalness: 0.3 });
for (let i = 0; i < 12; i++) {
  const a = (i / 12) * Math.PI * 2;
  const h = 6 + (i % 4) * 3;
  const p = new THREE.Mesh(new THREE.BoxGeometry(1.4, h, 1.4), pillarMat);
  p.position.set(Math.cos(a) * 14, h / 2, Math.sin(a) * 14);
  p.rotation.y = a;
  scene.add(p);
}

const elEl = document.getElementById('el');
const evEl = document.getElementById('ev');
const tuEl = document.getElementById('tu');
const tvEl = document.getElementById('tv');
const raEl = document.getElementById('ra');
const rvEl = document.getElementById('rv');

elEl.addEventListener('input', function () {
  elevation = Number(elEl.value);
  evEl.textContent = String(elevation);
  updateSun();
});
tuEl.addEventListener('input', function () {
  uniforms['turbidity'].value = Number(tuEl.value);
  tvEl.textContent = String(tuEl.value);
});
raEl.addEventListener('input', function () {
  uniforms['rayleigh'].value = Number(raEl.value);
  rvEl.textContent = Number(raEl.value).toFixed(1);
});

updateSun();

renderer.setAnimationLoop(function () {
  controls.update();
  renderer.render(scene, camera);
});

window.addEventListener('resize', function () {
  const w = stage.clientWidth;
  const h = stage.clientHeight;
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
  renderer.setSize(w, h);
});
</script>
</body>
</html>