Flutter中3D模型部件交互功能实现求助

先明确：选3D模型而非图片 #

图片无法实现部件级的独立交互（前置、高亮、状态变色），完全满足不了你的需求，必须用设计师提供的.glb模型。

核心交互实现步骤（基于Flutter常用3D库，以three_dart为例） #

1. 预处理3D模型 #

要求设计师确保.glb中每个需要交互的部件（座椅、钢索、把手）都有唯一的名称标识（比如seat、cable、handle），且每个部件是独立的Mesh对象（未合并），这是后续操作的基础。

2. 点击左侧按钮触发部件前置+高亮 #

• 加载模型后，先缓存每个部件的原始状态：renderOrder（渲染层级）、原始颜色、原始位置
• 点击左侧标签按钮时，执行以下操作：
  • 恢复之前高亮部件的原始状态
  • 定位目标部件：通过名称从场景中获取对应Mesh
  • 前置显示：将目标部件的renderOrder设为远高于其他部件（比如mesh.renderOrder = 100，默认其他部件为0）
  • 高亮效果：修改部件材质的自发光颜色（mesh.material.emissive = Color(0xffffcc)），实现高亮

代码片段示例：

// 缓存部件原始状态的Map
final Map<String, Map<String, dynamic>> _originalStates = {};

// 初始化时保存原始状态
void _saveOriginalState(Mesh mesh) {
  _originalStates[mesh.name] = {
    'renderOrder': mesh.renderOrder,
    'color': mesh.material.color.clone(),
    'emissive': mesh.material.emissive.clone(),
  };
}

// 点击按钮触发的方法
void _highlightPart(String partName) {
  setState(() {
    // 恢复之前高亮的部件
    _originalStates.forEach((key, value) {
      final mesh = _scene.children.firstWhere((e) => e.name == key) as Mesh;
      mesh.renderOrder = value['renderOrder'];
      mesh.material.color = value['color'];
      mesh.material.emissive = value['emissive'];
    });

    // 处理当前选中的部件
    final targetMesh = _scene.children.firstWhere((e) => e.name == partName) as Mesh;
    targetMesh.renderOrder = 100;
    targetMesh.material.emissive = Color(0xffffcc);
  });
}

3. 部件状态切换（单击绿/双击红） #

需要通过**射线检测（Raycasting）**识别3D场景中的点击目标：

• 在Flutter中监听3D画布的点击/双击事件，将屏幕坐标转换为3D场景中的射线
• 检测射线与哪个部件相交，判断点击类型后修改部件颜色：
  • 单击：将部件的漫反射颜色设为绿色（Color(0x00ff00)）
  • 双击：设为红色（Color(0xff0000)）

代码片段示例：

enum TapType { single, double }

void _handleCanvasTap(TapDownDetails details, TapType tapType) {
  // 将屏幕坐标转换为归一化设备坐标
  final size = _glWidget.size;
  final x = (details.localPosition.x / size.width) * 2 - 1;
  final y = -(details.localPosition.y / size.height) * 2 + 1;

  // 创建射线
  final raycaster = Raycaster();
  raycaster.setFromCamera(Vector2(x, y), _camera);

  // 检测相交的部件
  final intersects = raycaster.intersectObjects(_scene.children, true);
  if (intersects.isNotEmpty) {
    final targetMesh = intersects.first.object as Mesh;
    setState(() {
      if (tapType == TapType.single) {
        targetMesh.material.color = Color(0x00ff00);
      } else if (tapType == TapType.double) {
        targetMesh.material.color = Color(0xff0000);
      }
    });
  }
}

4. 状态管理注意事项 #

• 可以用setState或状态管理库（如Provider、Riverpod）跟踪每个部件的状态，避免重复代码
• 每次切换选中部件时，必须重置之前部件的所有状态，防止多个部件同时高亮

关键注意点 #

• 若模型部件是合并的，需要让设计师拆分后重新导出.glb，否则无法单独操作单个部件
• 射线检测的精度可以通过调整射线的near和far参数优化
• 频繁修改材质可能影响性能，可提前创建不同状态的材质（正常、高亮、绿、红），切换时直接替换材质而非修改颜色

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