如何使用three.js为PLY模型的眼睛区域添加红色？

方法一：基于顶点坐标筛选设置顶点颜色 #

• 加载PLY模型后，遍历几何体的顶点数据，根据眼睛区域的坐标范围（需要你自己观察模型的坐标区间，比如眼睛的Z轴坐标普遍大于某个值）筛选出眼睛的顶点
• 给这些顶点设置红色的顶点颜色属性，其余顶点保留默认颜色
• 使用支持顶点颜色的材质，开启vertexColors参数

const loader = new THREE.PLYLoader();
loader.load('your-model.ply', (geometry) => {
  // 初始化顶点颜色缓冲区
  geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(geometry.attributes.position.count * 3), 3));
  const colorAttr = geometry.attributes.color;
  const positionAttr = geometry.attributes.position;

  // 遍历所有顶点，根据坐标判断是否为眼睛区域（示例阈值需根据你的模型调整）
  for (let i = 0; i < positionAttr.count; i++) {
    const z = positionAttr.getZ(i);
    // 假设眼睛区域的Z坐标大于4，实际数值要你自己测试模型坐标得到
    if (z > 4) {
      colorAttr.setXYZ(i, 1, 0, 0); // 红色RGB值
    } else {
      colorAttr.setXYZ(i, 1, 1, 1); // 默认白色
    }
  }

  const material = new THREE.MeshStandardMaterial({
    vertexColors: THREE.VertexColors,
    side: THREE.DoubleSide
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
});

方法二：自定义着色器实现局部颜色替换 #

• 利用材质的onBeforeCompile钩子修改片段着色器，通过顶点位置或UV坐标判断眼睛区域，在着色阶段替换颜色
• 这种方法不需要修改几何体数据，适合坐标规则或有UV标记的模型

const loader = new THREE.PLYLoader();
loader.load('your-model.ply', (geometry) => {
  const material = new THREE.MeshStandardMaterial({
    color: 0xffffff, // 主体默认颜色
    side: THREE.DoubleSide
  });

  material.onBeforeCompile = (shader) => {
    // 插入眼睛区域判断函数
    shader.fragmentShader = `
      bool isEyeArea() {
        // 这里用顶点位置作为判断条件，实际请根据模型调整坐标范围
        return vPosition.z > 4.0;
      }
    ` + shader.fragmentShader;

    // 在颜色输出前替换眼睛区域的颜色
    shader.fragmentShader = shader.fragmentShader.replace(
      'vec4 diffuseColor = vec4( diffuse, opacity );',
      `vec4 diffuseColor = vec4( diffuse, opacity );
      if (isEyeArea()) {
        diffuseColor = vec4(1.0, 0.0, 0.0, opacity); // 红色
      }`
    );
  };

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
});

方法三：建模软件预处理分割模型 #

• 如果有建模工具（比如Blender），可以直接打开PLY模型，选中眼睛区域的面，将其分离为独立的网格
• 分别导出主体和眼睛两个PLY文件，在Three.js中分别加载，给眼睛模型单独设置红色材质，主体保留原材质

内容的提问来源于stack exchange，提问作者larabrookk