Geometry Shapes

<!--
  说明：带孔洞的面要素用 Shape + Path 描述，挤出成薄板后仍保留内部挖空
  核心逻辑：outer 轮廓加 holes 数组，ExtrudeGeometry 三角剖分自动处理环洞
  依赖：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:#0d1218}
  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:14px;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>2</b> 个 · 含 1 个洞</span>
  <button id="wire">三角剖分</button>
  <button id="edge">显示边界</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;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0d1218);
scene.fog = new THREE.Fog(0x0d1218, 30, 60);

const camera = new THREE.PerspectiveCamera(42, stage.clientWidth / stage.clientHeight, 0.1, 200);
camera.position.set(13, 14, 16);

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

scene.add(new THREE.HemisphereLight(0xb6d2f2, 0x141b22, 1.5));
const sun = new THREE.DirectionalLight(0xffe9c8, 2.1);
sun.position.set(-10, 18, 8);
scene.add(sun);

const grid = new THREE.GridHelper(36, 36, 0x1e2c3a, 0x162029);
scene.add(grid);

/* 外环：半径 5 附近带起伏的闭合多边形 */
const outline = [];
for (let i = 0; i < 14; i++) {
  const a = (i / 14) * Math.PI * 2;
  const r = 4.6 + Math.sin(i * 2.3) * 0.55 + Math.cos(i * 1.2) * 0.35;
  outline.push(new THREE.Vector2(Math.cos(a) * r, Math.sin(a) * r));
}

const shape = new THREE.Shape(outline);

/* 洞：内部挖掉的圆形水面 */
const hole = new THREE.Path();
hole.absarc(-1.2, 0.6, 1.5, 0, Math.PI * 2, true);
shape.holes.push(hole);

const plateGeo = new THREE.ExtrudeGeometry(shape, {
  depth: 0.5,
  bevelEnabled: false,
  curveSegments: 24
});
plateGeo.rotateX(-Math.PI / 2);
plateGeo.computeVertexNormals();

const plateMat = new THREE.MeshStandardMaterial({
  color: 0x4f7fa8,
  roughness: 0.78,
  metalness: 0.05,
  flatShading: false
});
const plate = new THREE.Mesh(plateGeo, plateMat);
const model = new THREE.Group();
model.add(plate);
scene.add(model);

/* 第二个面要素：不带洞的小岛，验证同一套写法可复用 */
const islandPts = [];
for (let i = 0; i < 10; i++) {
  const a = (i / 10) * Math.PI * 2;
  const r = 1.4 + Math.sin(i * 1.7) * 0.3;
  islandPts.push(new THREE.Vector2(Math.cos(a) * r + 6.5, Math.sin(a) * r - 5));
}
const islandGeo = new THREE.ExtrudeGeometry(new THREE.Shape(islandPts), {
  depth: 0.5,
  bevelEnabled: false
});
islandGeo.rotateX(-Math.PI / 2);
islandGeo.computeVertexNormals();
const island = new THREE.Mesh(
  islandGeo,
  new THREE.MeshStandardMaterial({ color: 0x5f8f76, roughness: 0.8 })
);
model.add(island);

/* 边界线：EdgesGeometry 只保留折角明显的边，洞的轮廓也在其中 */
const edges = new THREE.Group();
model.add(edges);

[plateGeo, islandGeo].forEach(function (g) {
  const line = new THREE.LineSegments(
    new THREE.EdgesGeometry(g, 25),
    new THREE.LineBasicMaterial({ color: 0x9fd6ff, transparent: true, opacity: 0.55 })
  );
  line.visible = false;
  edges.add(line);
});

let wire = false;
const wireBtn = document.getElementById('wire');
wireBtn.addEventListener('click', function () {
  wire = !wire;
  plateMat.wireframe = wire;
  island.material.wireframe = wire;
  wireBtn.textContent = wire ? '实体显示' : '三角剖分';
});

let showEdge = false;
const edgeBtn = document.getElementById('edge');
edgeBtn.addEventListener('click', function () {
  showEdge = !showEdge;
  edges.children.forEach(function (l) { l.visible = showEdge; });
  edgeBtn.textContent = showEdge ? '隐藏边界' : '显示边界';
});

/* 慢速自转，方便看清洞的内壁与厚度 */
renderer.setAnimationLoop(function () {
  model.rotation.y += 0.0016;
  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>