Points Drawrange

<!--
  说明：一次性缓冲 20 万个地面点，用 setDrawRange 逐块推进，模拟点云流式加载
  核心逻辑：BufferGeometry 只上传一次，drawRange.count 决定这一帧画多少个点
  依赖：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:#0b0f14}
  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">
  <span>总点数 <b id="total">0</b></span>
  <label>已绘制 <input type="range" id="cut" min="0" max="100" step="0.5" value="100"></label>
  <span><b id="cutv">100</b> %</span>
  <button id="replay">重播加载</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;
stage.appendChild(renderer.domElement);

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

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

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

scene.add(new THREE.HemisphereLight(0x9fc4ff, 0x101820, 1.4));

/* 规则网格上取点，行列数决定总点数：500 × 400 = 200000 */
const COLS = 500;
const ROWS = 400;
const W = 24;
const D = 19.2;
const COUNT = COLS * ROWS;

function heightAt(x, z) {
  const a = 1.6 * Math.sin(x * 0.33) * Math.cos(z * 0.29);
  const b = 0.7 * Math.sin(x * 0.9 + z * 0.7);
  const c = 2.4 * Math.exp(-((x - 3) * (x - 3) + (z + 2.5) * (z + 2.5)) / 24);
  return a + b + c;
}

const positions = new Float32Array(COUNT * 3);
const colors = new Float32Array(COUNT * 3);
const col = new THREE.Color();

for (let r = 0; r < ROWS; r++) {
  for (let c = 0; c < COLS; c++) {
    const i = r * COLS + c;
    const x = (c / (COLS - 1) - 0.5) * W;
    const z = (r / (ROWS - 1) - 0.5) * D;
    const y = heightAt(x, z);
    positions[i * 3] = x;
    positions[i * 3 + 1] = y;
    positions[i * 3 + 2] = z;

    const t = THREE.MathUtils.clamp((y + 1.6) / 4.2, 0, 1);
    col.setHSL(0.58 - 0.5 * t, 0.55, 0.42 + 0.22 * t);
    colors[i * 3] = col.r;
    colors[i * 3 + 1] = col.g;
    colors[i * 3 + 2] = col.b;
  }
}

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
geometry.computeBoundingSphere();

const material = new THREE.PointsMaterial({
  size: 0.075,
  sizeAttenuation: true,
  vertexColors: true,
  transparent: true,
  opacity: 0.92,
  depthWrite: false
});

const cloud = new THREE.Points(geometry, material);
scene.add(cloud);

const totalEl = document.getElementById('total');
const cutEl = document.getElementById('cut');
const cutvEl = document.getElementById('cutv');
totalEl.textContent = COUNT.toLocaleString('en-US');

let fraction = 1;
let progress = 1;
let playing = false;

function applyFraction(v) {
  fraction = THREE.MathUtils.clamp(v, 0, 1);
  geometry.setDrawRange(0, Math.floor(COUNT * fraction));
  cutvEl.textContent = (fraction * 100).toFixed(1);
  cutEl.value = String(fraction * 100);
}

cutEl.addEventListener('input', function () {
  playing = false;
  applyFraction(Number(cutEl.value) / 100);
});

document.getElementById('replay').addEventListener('click', function () {
  progress = 0;
  playing = true;
});

applyFraction(1);

const clock = new THREE.Clock();

renderer.setAnimationLoop(function () {
  const dt = Math.min(clock.getDelta(), 0.1);

  if (playing) {
    progress = Math.min(1, progress + dt / 2.6);
    applyFraction(progress);
    if (progress >= 1) playing = false;
  }

  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>