Skybox

<!--
  说明：用 Canvas 生成的六个面组成立方体天空盒，并与球体穹顶、纯色背景对比
  核心逻辑：CubeTexture 直接作为 scene.background，球体方案则用 BackSide 的大球包住场景
  依赖：three.js 0.160.0、OrbitControls · 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:#0d1117}
  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}
  .bar button{font:inherit;font-size:12px;padding:4px 10px;border-radius:5px;cursor:pointer;
       border:1px solid #303845;background:#1d2531;color:#c8d2e0}
  .bar button:hover{background:#253040}
  .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="mode">立方体天空盒</b></span>
  <button id="switch">切到球体穹顶</button>
  <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';

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 = 1.05;
renderer.setClearColor(0x0b1016);
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x7fa6c8, 110, 320);

const camera = new THREE.PerspectiveCamera(
  45, stage.clientWidth / stage.clientHeight, 0.5, 900
);
camera.position.set(60, 44, 72);

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

scene.add(new THREE.HemisphereLight(0xcfe2ff, 0x1a2430, 1.4));

const sun = new THREE.DirectionalLight(0xfff2dc, 2.1);
sun.position.set(-90, 70, 60);
scene.add(sun);

/* ---------- 生成天空面 ---------- */
const HORIZON = '#7fa6c8';
const ZENITH = '#1c3355';
const NADIR = '#101820';

function skyCanvas(top, bottom, glow) {
  const canvas = document.createElement('canvas');
  canvas.width = 256;
  canvas.height = 256;

  const ctx = canvas.getContext('2d');
  const g = ctx.createLinearGradient(0, 0, 0, 256);
  g.addColorStop(0, top);
  g.addColorStop(0.58, HORIZON);
  g.addColorStop(1, bottom);
  ctx.fillStyle = g;
  ctx.fillRect(0, 0, 256, 256);

  if (glow) {
    const r = ctx.createRadialGradient(96, 128, 4, 96, 128, 96);
    r.addColorStop(0, 'rgba(255, 236, 200, 0.95)');
    r.addColorStop(0.35, 'rgba(255, 210, 140, 0.28)');
    r.addColorStop(1, 'rgba(255, 210, 140, 0)');
    ctx.fillStyle = r;
    ctx.fillRect(0, 0, 256, 256);
  }

  return canvas;
}

/* 顺序固定：+X、-X、+Y、-Y、+Z、-Z */
const faces = [
  skyCanvas(ZENITH, NADIR, true),
  skyCanvas(ZENITH, NADIR, false),
  skyCanvas(ZENITH, HORIZON, false),
  skyCanvas(HORIZON, NADIR, false),
  skyCanvas(ZENITH, NADIR, false),
  skyCanvas(ZENITH, NADIR, false)
];

const cubeTexture = new THREE.CubeTexture(faces);
cubeTexture.colorSpace = THREE.SRGBColorSpace;
cubeTexture.needsUpdate = true;

/* ---------- 球体穹顶方案 ---------- */
const domeCanvas = document.createElement('canvas');
domeCanvas.width = 8;
domeCanvas.height = 256;
const domeCtx = domeCanvas.getContext('2d');
const domeGrad = domeCtx.createLinearGradient(0, 0, 0, 256);
domeGrad.addColorStop(0, ZENITH);
domeGrad.addColorStop(0.55, HORIZON);
domeGrad.addColorStop(1, NADIR);
domeCtx.fillStyle = domeGrad;
domeCtx.fillRect(0, 0, 8, 256);

const domeTexture = new THREE.CanvasTexture(domeCanvas);
domeTexture.colorSpace = THREE.SRGBColorSpace;

const dome = new THREE.Mesh(
  new THREE.SphereGeometry(420, 32, 24),
  new THREE.MeshBasicMaterial({
    map: domeTexture,
    side: THREE.BackSide,
    depthWrite: false,
    fog: false
  })
);
dome.visible = false;
scene.add(dome);

/* ---------- 地面与楼群 ---------- */
const ground = new THREE.Mesh(
  new THREE.CircleGeometry(300, 96),
  new THREE.MeshStandardMaterial({ color: 0x1a2430, roughness: 1 })
);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

const boxGeo = new THREE.BoxGeometry(4, 1, 4);
boxGeo.translate(0, 0.5, 0);
const boxMat = new THREE.MeshStandardMaterial({ color: 0x3b4a5c, roughness: 0.75 });

for (let i = 0; i < 160; i++) {
  const a = i * 2.39996;
  const r = 10 + Math.sqrt(i) * 3.2;
  const mesh = new THREE.Mesh(boxGeo, boxMat);
  mesh.position.set(Math.cos(a) * r, 0, Math.sin(a) * r);
  mesh.scale.set(1, 4 + ((i * 29) % 17) * 2.4, 1);
  mesh.rotation.y = (i % 6) * 0.26;
  scene.add(mesh);
}

/* ---------- 切换 ---------- */
scene.background = cubeTexture;

const modeEl = document.getElementById('mode');
const switchBtn = document.getElementById('switch');
const MODES = ['cube', 'sphere', 'solid'];
const LABELS = ['立方体天空盒', '球体穹顶', '纯色背景'];
let modeIndex = 0;

function applyMode() {
  const mode = MODES[modeIndex];
  modeEl.textContent = LABELS[modeIndex];
  switchBtn.textContent = '切到' + LABELS[(modeIndex + 1) % MODES.length];

  dome.visible = mode === 'sphere';

  if (mode === 'cube') scene.background = cubeTexture;
  else if (mode === 'solid') scene.background = new THREE.Color(0x0d1620);
  else scene.background = null;
}

switchBtn.addEventListener('click', function () {
  modeIndex = (modeIndex + 1) % MODES.length;
  applyMode();
});

applyMode();

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>