Three.js 进阶：场景管理、性能与加载策略

import * as THREE from 'three';

const scene = new THREE.Scene();

const city = new THREE.Group();          // 语义分组：可以整体显隐、整体定位
city.name = 'city';
city.visible = false;                    // visible=false 的子树整体被跳过
scene.add(city);

const road = new THREE.Mesh(
  new THREE.PlaneGeometry(20, 4),
  new THREE.MeshStandardMaterial({ color: 0x555b66 })
);
city.add(road);

class MeshPool {
  private free: THREE.Mesh[] = [];
  constructor(
    private factory: () => THREE.Mesh,   // 几何体与材质在工厂里创建一次
    private reset: (mesh: THREE.Mesh) => void,
    private size = 16
  ) {
    for (let i = 0; i < this.size; i++) this.free.push(this.factory());
  }

  acquire(): THREE.Mesh | null {
    const mesh = this.free.pop();
    if (!mesh) return null;              // 池空：宁可不出现，也别现场 new
    this.reset(mesh);
    mesh.visible = true;
    return mesh;
  }

  release(mesh: THREE.Mesh): void {
    mesh.visible = false;                // 复用靠显隐，资源不释放
    this.free.push(mesh);
  }
}

const tree = new THREE.InstancedMesh(
  treeGeometry,                            // 一份几何体
  treeMaterial,                            // 一份材质
  2000                                     // 实例数
);

const matrix = new THREE.Matrix4();
for (let i = 0; i < tree.count; i++) {
  matrix.makeRotationY(i * 0.37);
  matrix.setPosition(x[i], 0, z[i]);
  tree.setMatrixAt(i, matrix);             // 每个实例一个变换矩阵
}
tree.instanceMatrix.needsUpdate = true;
// 每帧动画的实例改用 DynamicDrawUsage 提示驱动：
// tree.instanceMatrix.setUsage(THREE.DynamicDrawUsage);

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const manager = new THREE.LoadingManager();
manager.onProgress = (url, loaded, total) => {
  setProgress(loaded / total);             // 进度条数据来自真实计数
};
manager.onLoad = () => {
  scene.userData.ready = true;             // 全部就绪再进入开场动画
};
manager.onError = (url) => {
  showFallback(url);                       // 单资源失败要有降级出口
};

const gltfLoader = new GLTFLoader(manager);
gltfLoader.load('/models/robot.glb', (gltf) => {
  scene.add(gltf.scene);
}, undefined, () => showFallback('/models/robot.glb'));

let needsRender = true;
let tweening = false;

export function invalidate(): void { needsRender = true; }

controls.addEventListener('change', invalidate);   // 相机被用户拨动时失效
scene.addEventListener('pointerdown', invalidate); // 交互开始失效

function tick(): void {
  if (tweening) {
    camera.position.lerp(cameraTarget, 0.08);     // 插值逼近目标
    if (camera.position.distanceTo(cameraTarget) > 0.01) invalidate();
    else tweening = false;                        // 收敛后停止失效
  }
  if (needsRender) {
    needsRender = false;
    renderer.render(scene, camera);
  }
}
renderer.setAnimationLoop(tick);

const container = document.querySelector<HTMLElement>('.viewer')!;
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });

const observer = new ResizeObserver((entries) => {
  const { width, height } = entries[0].contentRect;
  if (width < 1 || height < 1) return;         // 弹窗收起时别拿 0 初始化
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));  // 封顶 2
  renderer.setSize(width, height, false);      // false: 不改 style，尺寸全由布局控制
  camera.aspect = width / height;
  camera.updateProjectionMatrix();             // 改了 aspect 必须更新投影矩阵
  invalidate();                                // 尺寸变了要重画一帧
});
observer.observe(container);

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

viewerEl.addEventListener('pointermove', (event) => {
  const rect = viewerEl.getBoundingClientRect();
  pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;   // NDC: [-1, 1]
  pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
  raycaster.setFromCamera(pointer, camera);
  const hits = raycaster.intersectObjects(pickables, false);       // 只检测可交互集合
  highlight(hits[0]?.object ?? null);
});

function disposeObject3D(root: THREE.Object3D): void {
  root.traverse((obj) => {
    const mesh = obj as THREE.Mesh;
    if (!mesh.isMesh) return;

    mesh.geometry.dispose();

    const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
    for (const material of materials) {
      for (const value of Object.values(material)) {
        const maybeTexture = value as THREE.Texture;
        if (maybeTexture && maybeTexture.isTexture) maybeTexture.dispose();  // 纹理
      }
      material.dispose();
    }
  });
  root.clear();
}

function disposeViewer(): void {
  cancelAnimationFrame(loopId);            // 停循环
  observer.disconnect();                    // 停尺寸监听
  controls.dispose();                       // 控制器内部也挂了事件
  disposeObject3D(scene);
  renderer.dispose();                       // 释放 WebGL 上下文相关资源
  renderer.forceContextLoss();              // 主动释放上下文，便于页面复用
  renderer.domElement.remove();
}