Mesh

构造

属性

castShadow 与 receiveShadow 继承自 Object3D， 但只有网格、线、点等可渲染对象才真正参与阴影流程。

方法

基本用法

const geometry = new THREE.BoxGeometry(1.2, 2.4, 1.2);
const material = new THREE.MeshStandardMaterial({
  color: 0x4f9ef8,
  roughness: 0.4,
  metalness: 0.1
});

const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(10, 1.2, -6);
mesh.rotation.y = Math.PI / 6;
mesh.castShadow = true;
mesh.receiveShadow = true;

scene.add(mesh);

多材质与几何分组

一个网格可以按面片分组使用多份材质，例如建筑外墙与玻璃幕墙分别贴图。 前提是几何体里存在 groups，且数组顺序与分组索引对应。

const mats = [
  new THREE.MeshStandardMaterial({ color: 0xb9c3cc }),
  new THREE.MeshPhysicalMaterial({ color: 0x9fd8ff, roughness: 0.1, metalness: 0 })
];

const mesh = new THREE.Mesh(geometry, mats);
// 每个分组一次绘制调用，材质越多，调用数越高

共享与克隆

mesh.clone() 复制的是引用：新旧网格共用同一份几何体与材质。 这样做省显存，但改材质颜色会同时影响所有克隆体。需要独立外观时， 克隆后要再 material.clone()。

上千个外观相同的小物体，不要逐个创建 Mesh。 使用 InstancedMesh 把变换装进一个缓冲区，能把绘制调用压到一次， 具体对比见「性能对比」示例。

拾取与高亮

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

renderer.domElement.addEventListener('pointerdown', function (event) {
  const rect = renderer.domElement.getBoundingClientRect();
  pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

  raycaster.setFromCamera(pointer, camera);
  const hits = raycaster.intersectObjects(scene.children, true);

  if (hits.length) {
    const obj = hits[0].object;
    obj.material.emissive.setHex(0x2a5a8a); // 仅适用于有 emissive 的材质
  }
});

矢量图标、标注这类内容通常不是网格，射线拾取不到。 需要在数据层做屏幕空间距离判断，或为每个标注挂一个不可见的拾取代理。