如何在Flutter/FlutterFlow中实现带旋转、高亮的3D房屋交互应用？

一、核心3D插件选择 #

给你推荐两个对新手友好、适配Flutter/FlutterFlow的插件，不用懂复杂3D原理就能上手：

• flutter_3d_model：轻量型插件，支持GLB/GLTF格式模型，自带手势旋转、缩放功能，集成快，适合快速搭建基础场景。
• three_dart：基于Three.js的Flutter封装，功能更全，支持材质修改、相机精准控制，文档比较完善，适合需要自定义交互的场景。

要是用FlutterFlow，直接在插件市场搜这俩，一键导入就能用，不用手动配依赖。

二、3D模型准备（必做步骤） #

你没3D基础的话，别碰复杂建模软件，用免费在线工具就行：

• 用SketchUp Free做房屋模型，浏览器就能用，拖拽就能拼出简单的房子、烟囱这些部件。导出的时候选GLB格式（Flutter插件兼容性最好）。
• 导出前一定要给需要高亮的部件单独命名，比如烟囱叫"chimney"、正面墙叫"facade"，后面代码里靠这个名字找对应的部件。

三、功能实现分步走 #

1. 基础旋转交互 #

• 用flutter_3d_model的话，初始化组件时开enablePan和enableZoom，用户就能用手势旋转、缩放模型：

  Flutter3dModel(
    src: 'assets/models/house.glb',
    enablePan: true,
    enableZoom: true,
  )
  

• 用three_dart的话，绑定OrbitControls就能实现手势控制：

  OrbitControls(
    camera: camera,
    autoRotate: false, // 先关自动旋转，让用户手动控制
    enableZoom: true,
  )
  

2. 显示元素名称 #

在模型下方放个Text组件，要么固定显示所有需要的名称（"Facade"、"Roof"、"Back Wall"），要么后续根据视角切换显示当前正对的元素（新手先做固定显示，后面再优化）。

3. Next按钮触发高亮+自动旋转 #

（1）元素高亮

以three_dart为例，先通过部件名称找到对应的Mesh，点击Next时改材质颜色：

// 提前从模型里拿到烟囱部件
Mesh chimney = scene.getObjectByName('chimney') as Mesh;

// Next按钮点击事件
ElevatedButton(
  onPressed: () {
    // 把烟囱材质改成绿色
    chimney.material = MeshLambertMaterial(color: Colors.green);
    setState(() {}); // 触发界面更新
  },
  child: const Text('Next'),
)

要是用flutter_3d_model，得提前在建模时给部件设置可修改的材质，或者用插件自带的材质修改API（部分版本支持）。

（2）自动旋转到指定元素

通过调整相机位置，让目标部件对准屏幕中心，还能加个动画让过渡更平滑：

// 假设烟囱的位置是(0, 2, 0)，调整相机位置对准它
camera.position.set(0, 2, 5);
camera.lookAt(const Vector3(0, 2, 0)); // 让相机看向烟囱

// 加个1秒的平滑过渡动画
final animationController = AnimationController(
  vsync: this,
  duration: const Duration(seconds: 1),
);
Tween<double>(begin: camera.position.z, end: 5).animate(
  CurvedAnimation(parent: animationController, curve: Curves.easeInOut),
).addListener(() {
  camera.position.z = animation.value;
  setState(() {});
});
animationController.forward();

四、FlutterFlow专属技巧 #

• 导入3D插件后，在组件树里加3D模型组件，把GLB文件上传到资产库就行。
• 用「自定义动作（Custom Action）」实现按钮点击时的材质修改和相机控制，不用写太多代码，拖拽配置参数就行。
• 元素名称显示用文本组件，绑定状态变量，点击Next时更新变量值就能切换显示内容。

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