Flutter中three_dart、flutter_gl、three_dart_jsm如何关联触摸与3D坐标？

核心思路 #

和Unity的screenPointToRay逻辑一致，借助three_dart提供的Raycaster类，将屏幕触摸坐标转换为标准化设备坐标（NDC），再生成从相机出发的射线。这是Three.js生态通用的实现方式，three_dart完全兼容该逻辑。

具体实现步骤 #

1. 获取触摸的局部坐标
   在Flutter的触摸回调（如GestureDetector的onTapDown/onPanStart）中，将全局触摸坐标转换为flutter_gl渲染视图的局部坐标，避免视图偏移导致的坐标错误。

2. 转换为标准化设备坐标（NDC）
   把屏幕坐标映射到Three.js的NDC空间（范围为[-1, 1]），注意Flutter坐标原点在左上角，需要翻转Y轴：

   double ndcX = (localTouchX / viewWidth) * 2 - 1;
   double ndcY = -(localTouchY / viewHeight) * 2 + 1;
   

3. 生成射线并检测交互
   用Raycaster的setFromCamera方法生成射线，之后可检测射线与场景物体的交点：

// 初始化时创建Raycaster和相机
late Raycaster raycaster;
late PerspectiveCamera camera;
late FlutterGlController glController;

void initScene() {
  raycaster = Raycaster();
  camera = PerspectiveCamera(75, glController.size.width / glController.size.height, 0.1, 1000);
  // 相机位置、场景初始化...
}

// 触摸处理回调
void onTouchDown(TouchDownDetails details) {
  final Size viewSize = glController.size;
  // 转换为GLWidget局部坐标
  final Offset localPos = glController.globalToLocal(details.globalPosition);
  
  // 计算NDC坐标
  final double ndcX = (localPos.dx / viewSize.width) * 2 - 1;
  final double ndcY = -(localPos.dy / viewSize.height) * 2 + 1;
  
  // 设置射线起点和方向（从相机出发）
  raycaster.setFromCamera(Vector2(ndcX, ndcY), camera);
  
  // 检测与场景物体的交点（第二个参数true表示递归检测子物体）
  final List<Intersection> intersections = raycaster.intersectObjects(scene.children, true);
  
  if (intersections.isNotEmpty) {
    // 获取第一个命中点的3D坐标
    final Vector3 hitPoint = intersections.first.point;
    print("触摸命中3D坐标：${hitPoint.x}, ${hitPoint.y}, ${hitPoint.z}");
  }
}

关键注意事项 #

• 窗口大小变化时，必须更新相机的宽高比并重建投影矩阵：

  camera.aspect = newWidth / newHeight;
  camera.updateProjectionMatrix();
  

• 如果使用three_dart_jsm中的XR扩展（如VR/AR场景），核心逻辑不变，仅需将相机替换为XR专用相机（如XRCamera），setFromCamera方法依然适用。
• 你提到的webxr_vr_dragging.dart示例被注释，大概率是旧版API变更导致的废弃，无需依赖该示例，标准Raycaster方案已覆盖需求。

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