Cube

<!--
  说明：three.js 的最小可运行场景，透视相机观察一个持续自转的立方体
  核心逻辑：场景 / 相机 / 渲染器三件套，renderer.setAnimationLoop 驱动每帧
  依赖：three.js 0.160.0 · 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:10px;align-items:center;font-size:12px;color:#8b93a1}
  .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">
  <button id="pause">暂停</button>
  <button id="wire">线框</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"
  }
}
</script>
<script type="module">
import * as THREE from 'three';

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.1;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0d1117);

const camera = new THREE.PerspectiveCamera(
  45, stage.clientWidth / stage.clientHeight, 0.1, 100
);
camera.position.set(3.2, 2.4, 4.6);
camera.lookAt(0, 0, 0);

/* 光照：一束主光定方向，环境光补暗部 */
const key = new THREE.DirectionalLight(0xffffff, 2.6);
key.position.set(4, 6, 3);
scene.add(key);
scene.add(new THREE.HemisphereLight(0x9fc5ff, 0x1a2230, 0.9));

const geometry = new THREE.BoxGeometry(1.6, 1.6, 1.6);
const material = new THREE.MeshStandardMaterial({
  color: 0x4f9ef8,
  roughness: 0.32,
  metalness: 0.18
});

const cube = new THREE.Mesh(geometry, material);
cube.rotation.set(0.35, 0.6, 0.1);
scene.add(cube);

/* 棱线用独立的线段对象，便于单独开关 */
const edges = new THREE.LineSegments(
  new THREE.EdgesGeometry(geometry),
  new THREE.LineBasicMaterial({ color: 0x9fd0ff })
);
edges.scale.setScalar(1.001);
cube.add(edges);

const clock = new THREE.Clock();
let running = true;

renderer.setAnimationLoop(function () {
  const dt = Math.min(clock.getDelta(), 0.1);
  if (running) {
    cube.rotation.y += dt * 0.8;
    cube.rotation.x += dt * 0.22;
  }
  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);
});

const pauseBtn = document.getElementById('pause');
pauseBtn.addEventListener('click', function () {
  running = !running;
  pauseBtn.textContent = running ? '暂停' : '继续';
});

const wireBtn = document.getElementById('wire');
let wire = false;
wireBtn.addEventListener('click', function () {
  wire = !wire;
  material.wireframe = wire;
  edges.visible = !wire;
});
</script>
</body>
</html>