渲染 instancedMesh 边线

官方文档并没有提供渲染 instancedMesh 边线的方法。翻阅官方论坛，找不到现成的解决方案。能找到的代码要么因为年代久远失效了，要么过于复杂难以复用。

最终，答案很简单：

const eGeom = new THREE.InstancedBufferGeometry();
eGeom.setAttribute("position", geom.getAttribute("position"));
// 将 instancedMesh 的矩阵属性绑定到边线元素
eGeom.setAttribute("matrix", iMesh.instanceMatrix);
eGeom.instanceCount = iMesh.instanceMatrix.array.length / 16;
const eMat = new THREE.LineBasicMaterial({
  color: "#fff",
  onBeforeCompile: (shader) => {
    // shader 按绑定的矩阵属性计算顶点坐标，让边线与 instancedMesh 保持一致
    shader.vertexShader = `
    attribute mat4 matrix;
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * matrix * vec4( position, 1.0 );
    }`;
  },
});

const edges = new THREE.LineSegments(eGeom, eMat);
scene.add(edges);

渲染效果：

在线预览作品 《instancedEdges》，作者（@周狮虎）创作于 笔.COOL。