Orbit

<!--
  说明：OrbitControls 把拖拽、滚轮、右键平移映射成绕目标点的轨道运动
  核心逻辑：设置 target、阻尼、距离与极角范围，每帧调用 controls.update()
  依赖：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:10px;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="azi">—</b> · 极角 <b id="pol">—</b> · 距离 <b id="dist">—</b></span>
  <span class="sp"></span>
  <button id="autorot">停止自动旋转</button>
  <button id="damp">关闭阻尼</button>
  <button id="limit">限制俯仰</button>
  <button id="reset">复位视角</button>
</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;
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, 200
);
camera.position.set(9, 7, 11);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1.2, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.07;
controls.autoRotate = true;
controls.autoRotateSpeed = 0.9;
controls.minDistance = 4;
controls.maxDistance = 34;
controls.maxPolarAngle = Math.PI * 0.49;
controls.update();

scene.add(new THREE.HemisphereLight(0xc8ddff, 0x141c24, 1.15));

const key = new THREE.DirectionalLight(0xffffff, 2.3);
key.position.set(7, 12, 8);
scene.add(key);

/* 地面网格：GridHelper 自带细分与中心轴配色 */
const grid = new THREE.GridHelper(24, 24, 0x3a5068, 0x1e2a36);
scene.add(grid);

const center = new THREE.Mesh(
  new THREE.IcosahedronGeometry(1.3, 0),
  new THREE.MeshStandardMaterial({
    color: 0x4f9ef8,
    roughness: 0.32,
    metalness: 0.25,
    flatShading: true
  })
);
center.position.y = 1.9;
scene.add(center);

const blockGeo = new THREE.BoxGeometry(1.1, 1.1, 1.1);
const blockMat = new THREE.MeshStandardMaterial({
  color: 0x2f6f8f,
  roughness: 0.45,
  metalness: 0.2
});

/* 八个方块围成一圈，给轨道运动提供参照物 */
for (let i = 0; i < 8; i++) {
  const a = i / 8 * Math.PI * 2;
  const block = new THREE.Mesh(blockGeo, blockMat);
  block.position.set(Math.cos(a) * 6, 0.55, Math.sin(a) * 6);
  block.rotation.y = a;
  scene.add(block);
}

const azi = document.getElementById('azi');
const pol = document.getElementById('pol');
const dist = document.getElementById('dist');
let frames = 0;

renderer.setAnimationLoop(function () {
  controls.update();

  frames++;
  if (frames % 8 === 0) {
    azi.textContent = THREE.MathUtils.radToDeg(controls.getAzimuthalAngle()).toFixed(0) + '°';
    pol.textContent = THREE.MathUtils.radToDeg(controls.getPolarAngle()).toFixed(0) + '°';
    dist.textContent = camera.position.distanceTo(controls.target).toFixed(1);
  }

  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 autoBtn = document.getElementById('autorot');
autoBtn.addEventListener('click', function () {
  controls.autoRotate = !controls.autoRotate;
  autoBtn.textContent = controls.autoRotate ? '停止自动旋转' : '开始自动旋转';
});

const dampBtn = document.getElementById('damp');
dampBtn.addEventListener('click', function () {
  controls.enableDamping = !controls.enableDamping;
  dampBtn.textContent = controls.enableDamping ? '关闭阻尼' : '开启阻尼';
});

const limitBtn = document.getElementById('limit');
let limited = true;
limitBtn.addEventListener('click', function () {
  limited = !limited;
  controls.maxPolarAngle = limited ? Math.PI * 0.49 : Math.PI;
  controls.minPolarAngle = 0;
  limitBtn.textContent = limited ? '限制俯仰' : '解除限制';
});

document.getElementById('reset').addEventListener('click', function () {
  controls.reset();
});
</script>
</body>
</html>