Texture

<!--
  说明：用 Canvas 画一张带网格与注记的示意图，贴到平面上，观察重复与采样方式
  核心逻辑：CanvasTexture + RepeatWrapping + repeat 控制 UV 平铺倍数
  依赖：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:14px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600}
  .bar input[type=range]{width:140px;accent-color:#4f9ef8}
  .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">
  <label>重复倍数 <input type="range" id="rep" min="1" max="5" step="1" value="2"></label>
  <span><b id="repv">2</b> ×</span>
  <button id="wrap">切换为夹边</button>
  <button id="palette">换配色</button>
  <span class="sp"></span>
  <span>原始纹理 512 × 512</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;
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(0, 8.4, 9.6);

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

scene.add(new THREE.HemisphereLight(0xd6e6ff, 0x151d26, 1.1));
const key = new THREE.DirectionalLight(0xffffff, 2.0);
key.position.set(6, 10, 6);
scene.add(key);

/* ---------- 画纹理 ---------- */
const SIZE = 512;
const canvas = document.createElement('canvas');
canvas.width = SIZE;
canvas.height = SIZE;
const ctx = canvas.getContext('2d');

const palettes = [
  { bg: '#15303f', line: '#3f6c86', accent: '#e0a458', text: '#cfe4f2' },
  { bg: '#2b1f2c', line: '#6b4c6a', accent: '#7fd1b9', text: '#f0dbe8' }
];
let paletteIndex = 0;

function drawTexture() {
  const p = palettes[paletteIndex];

  ctx.fillStyle = p.bg;
  ctx.fillRect(0, 0, SIZE, SIZE);

  /* 两百米间隔的方格网 */
  ctx.strokeStyle = p.line;
  ctx.lineWidth = 1;
  for (let i = 0; i <= SIZE; i += 64) {
    ctx.beginPath();
    ctx.moveTo(i, 0);
    ctx.lineTo(i, SIZE);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(0, i);
    ctx.lineTo(SIZE, i);
    ctx.stroke();
  }

  /* 两条等比线，纯示意 */
  ctx.strokeStyle = p.accent;
  ctx.lineWidth = 2.5;
  const curves = [
    [40, 420, 160, 300, 300, 330, 470, 210],
    [30, 300, 150, 180, 320, 240, 480, 120]
  ];
  curves.forEach(function (c) {
    ctx.beginPath();
    ctx.moveTo(c[0], c[1]);
    ctx.bezierCurveTo(c[2], c[3], c[4], c[5], c[6], c[7]);
    ctx.stroke();
  });

  /* 注记 */
  ctx.fillStyle = p.text;
  ctx.font = '600 22px "PingFang SC", "Microsoft YaHei", sans-serif';
  ctx.fillText('地表覆盖类型图', 28, 46);
  ctx.font = '16px "PingFang SC", "Microsoft YaHei", sans-serif';
  ctx.fillText('0        200        400 m', 28, 492);
  ctx.fillText('31°N', 452, 82);
  ctx.fillText('120°E', 30, 82);

  /* 右下角留一个方向标 */
  ctx.strokeStyle = p.text;
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(452, 440);
  ctx.lineTo(452, 400);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(452, 396);
  ctx.lineTo(444, 412);
  ctx.lineTo(460, 412);
  ctx.closePath();
  ctx.fillStyle = p.text;
  ctx.fill();
}

drawTexture();

const texture = new THREE.CanvasTexture(canvas);
texture.colorSpace = THREE.SRGBColorSpace;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(2, 2);
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

const geometry = new THREE.PlaneGeometry(9, 9);
const material = new THREE.MeshStandardMaterial({
  map: texture,
  roughness: 0.86,
  metalness: 0.04
});

const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

/* 边缘加一圈线，重复贴图时能看清平面边界 */
const border = new THREE.LineSegments(
  new THREE.EdgesGeometry(new THREE.PlaneGeometry(9, 9)),
  new THREE.LineBasicMaterial({ color: 0x2b3a4a })
);
border.rotation.x = -Math.PI / 2;
border.position.y = 0.004;
scene.add(border);

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);
});

const rep = document.getElementById('rep');
const repv = document.getElementById('repv');
rep.addEventListener('input', function () {
  const v = Number(rep.value);
  texture.repeat.set(v, v);
  repv.textContent = v;
});

const wrapBtn = document.getElementById('wrap');
let repeatMode = true;
wrapBtn.addEventListener('click', function () {
  repeatMode = !repeatMode;
  const mode = repeatMode ? THREE.RepeatWrapping : THREE.ClampToEdgeWrapping;
  texture.wrapS = mode;
  texture.wrapT = mode;
  texture.needsUpdate = true;
  wrapBtn.textContent = repeatMode ? '切换为夹边' : '切换为重复';
});

const paletteBtn = document.getElementById('palette');
paletteBtn.addEventListener('click', function () {
  paletteIndex = (paletteIndex + 1) % palettes.length;
  drawTexture();
  texture.needsUpdate = true;
});
</script>
</body>
</html>