Blender操作问题：如何实现鼠标悬停时逐个添加选中面

核心思路 #

通过射线检测获取鼠标悬停命中的平面细分面，维护一个选中面集合，每次命中新面时将其加入集合，同时提供视觉反馈。

关键实现步骤（以Three.js为例） #

• 初始化射线检测工具
  创建Raycaster和Mouse对象，用于将屏幕鼠标坐标转换为3D空间中的射线，检测与平面的交点。

• 监听鼠标移动事件
  在鼠标移动时更新鼠标的标准化设备坐标，执行射线检测，获取当前命中的面信息。

• 维护选中面集合
  用数组存储选中的面索引，每次命中后判断该面是否已在集合中，未存在则添加，并更新面的视觉状态（比如修改颜色）。

代码示例 #

// 初始化核心对象
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const selectedFaces = [];
// 替换为你已细分好的平面网格
const planeMesh = yourSubdividedPlaneMesh;

// 开启面颜色属性（用于视觉标记）
planeMesh.geometry.colorsNeedUpdate = true;
planeMesh.material.vertexColors = THREE.FaceColors;

// 鼠标移动事件处理
window.addEventListener('mousemove', (e) => {
  // 转换屏幕坐标为Three.js标准化坐标
  mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;

  // 更新射线起点和方向
  raycaster.setFromCamera(mouse, camera);

  // 检测与平面的交点
  const hits = raycaster.intersectObject(planeMesh);
  if (hits.length > 0) {
    const faceIdx = hits[0].faceIndex;
    // 避免重复添加已选中的面
    if (!selectedFaces.includes(faceIdx)) {
      selectedFaces.push(faceIdx);
      // 标记选中的面为红色
      planeMesh.geometry.faces[faceIdx].color.setHex(0xff0000);
      planeMesh.geometry.colorsNeedUpdate = true;
    }
  }
});

注意事项 #

• 若使用BufferGeometry，需通过hits[0].index获取面索引，且确保几何体包含index属性。
• 可自定义面的选中状态属性（比如在几何体的userData中存储），避免直接修改颜色影响其他逻辑。
• 如需取消选中功能，可添加右键点击事件，移除对应面索引并恢复颜色。

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