Instancing Dynamic

<!--
  说明：四千个柱体作为一份实例化网格，每帧改写矩阵做波浪式生长，颜色逐实例不同
  核心逻辑：InstancedMesh.setMatrixAt / setColorAt，改完置 instanceMatrix.needsUpdate
  依赖：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:#0a1015}
  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;font-variant-numeric:tabular-nums}
  .bar input[type=range]{width:130px;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">
  <span>实例 <b>4096</b></span>
  <label>波高 <input type="range" id="amp" min="0.2" max="3" step="0.1" value="1.2"></label>
  <span><b id="ampv">1.2</b></span>
  <button id="pause">暂停</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(0x0a1015);
scene.fog = new THREE.Fog(0x0a1015, 30, 62);

const camera = new THREE.PerspectiveCamera(45, stage.clientWidth / stage.clientHeight, 0.1, 200);
camera.position.set(17, 13, 19);

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

scene.add(new THREE.HemisphereLight(0xb2cee8, 0x0e151b, 1.35));
const sun = new THREE.DirectionalLight(0xffe7c2, 2.0);
sun.position.set(-12, 20, 10);
scene.add(sun);

const GRID = 64;
const COUNT = GRID * GRID;
const SPACING = 0.52;
const HALF = (GRID - 1) * SPACING / 2;

/* 细长柱：底面在原点，缩放 Y 就是生长 */
const boxGeo = new THREE.BoxGeometry(0.26, 1, 0.26);
boxGeo.translate(0, 0.5, 0);

const mat = new THREE.MeshStandardMaterial({ roughness: 0.45, metalness: 0.25 });
const mesh = new THREE.InstancedMesh(boxGeo, mat, COUNT);
mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
scene.add(mesh);

const dummy = new THREE.Object3D();
const color = new THREE.Color();
const baseH = new Float32Array(COUNT);
const phase = new Float32Array(COUNT);

for (let ix = 0; ix < GRID; ix++) {
  for (let iz = 0; iz < GRID; iz++) {
    const i = iz * GRID + ix;
    baseH[i] = 0.4 + 1.6 * (Math.sin(ix * 0.22) * Math.cos(iz * 0.19) * 0.5 + 0.5);
    phase[i] = (ix + iz) * 0.09;
    dummy.position.set(-HALF + ix * SPACING, 0, -HALF + iz * SPACING);
    dummy.scale.set(1, baseH[i], 1);
    dummy.updateMatrix();
    mesh.setMatrixAt(i, dummy.matrix);

    color.setHSL(0.56 - baseH[i] * 0.1, 0.6, 0.34 + baseH[i] * 0.12);
    mesh.setColorAt(i, color);
  }
}
mesh.instanceMatrix.needsUpdate = true;
mesh.instanceColor.needsUpdate = true;

const floor = new THREE.Mesh(
  new THREE.PlaneGeometry(40, 40),
  new THREE.MeshStandardMaterial({ color: 0x121a21, roughness: 1 })
);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -0.01;
scene.add(floor);

let amp = 1.2;
let paused = false;

const ampEl = document.getElementById('amp');
const ampvEl = document.getElementById('ampv');
ampEl.addEventListener('input', function () {
  amp = Number(ampEl.value);
  ampvEl.textContent = amp.toFixed(1);
});

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

const clock = new THREE.Clock();
let t = 0;

renderer.setAnimationLoop(function () {
  const dt = Math.min(clock.getDelta(), 0.1);
  if (!paused) t += dt;

  for (let i = 0; i < COUNT; i++) {
    const ix = i % GRID;
    const iz = (i / GRID) | 0;
    const h = baseH[i] + Math.sin(t * 1.5 - phase[i]) * amp * 0.55;

    dummy.position.set(-HALF + ix * SPACING, 0, -HALF + iz * SPACING);
    dummy.scale.set(1, Math.max(0.05, h), 1);
    dummy.updateMatrix();
    mesh.setMatrixAt(i, dummy.matrix);
  }
  mesh.instanceMatrix.needsUpdate = true;

  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>