当前位置：首页 > news >正文

Flutter + Three.js (WebView)实现桌面端3d模型展示和交互

news 2026/2/9 3:30:38

文章目录

flutter(桌面端)瓶颈
一、Flutter+three.js
二、Flutter+three.js 实现思路
- 1.在Flutter 中使用webview 进行嵌套
- 2.开启上面嵌套的页面地址
- 2.在含有three.js 的html 中引入模型
- 3.两个页面之间进行通信，如图：
总结

flutter(桌面端)瓶颈

Flutter 本身并不直接支持 3D 桌面应用程序的开发，Flutter 使用的是自己的渲染引擎（Skia），它旨在高效地处理 2D 绘制和界面构建，而不是 3D 图形渲染。Skia 是一个强大的 2D 渲染库，但它没有为复杂的 3D 场景优化，因此 Flutter 本身对 3D 的支持较弱。因此如果想在flutter 中实现3d模型并实现交互，则需要用别的方式。

一、Flutter+three.js

这种方式，我是比较推荐的，如果你是前端的开发者，用这种方式，可以很快的上手实现。先来看一下整体的视频效果：视频效果

图片效果：
在这里插入图片描述
即：用不同的按钮控制模型的样式，一个按钮是为模型添加皮肤，一个按钮是可以正向旋转模型，一个按钮是可以反向旋转模型，另一个按钮是可以在模型的指定位置添加自己定义的数字。

占用的性能:
在这里插入图片描述

二、Flutter+three.js 实现思路

1.在Flutter 中使用webview 进行嵌套

这个方法就好比前端的iframe 一样，即页面中嵌套页面，具体的部分代码结构如下：
在这里插入图片描述

2.开启上面嵌套的页面地址

如果你有vscode ,可以用快捷的开启方式：
在这里插入图片描述
这样子就可以开启以这个页面为服务的地址，为啥要用这种方式呢？而不直接点击呢，因为如果你直接使用点击的话，可能有些资源加载不出来，若果你没有vscode,你也可以用node,或者java 命令行来开启服务。

2.在含有three.js 的html 中引入模型

如图：
在这里插入图片描述
这边你需要提供一下模型的obj,或者别的方式，可以从uniyt 中去生成，也可以从Blender 可以用于创建 3D 模型，并将模型导出为常用的 3D 文件格式，比如 OBJ 或 FBX，如果没有这方面的知识，可以试着从网上找一些模型先代替一下。

3.两个页面之间进行通信，如图：

在flutter 中发送命令：
在这里插入图片描述

在three.js的页面中接受发出的信号：
在这里插入图片描述

总结

这里只是展示了一种方式，其实还有很多的方式可以实现桌面端的3d,例如：
（1）Flutter + Unity (flutter_unity_widget),通过 flutter_unity_widget 插件，将 Unity 的内容嵌入到 Flutter 应用中，并在桌面端显示。
（2）Flutter + OpenGL：可以使用 flutter_gl 或 dart:ffi（外部函数接口）来调用本机的 OpenGL 库，并在 Flutter 桌面应用程序中展示 3D 模型。这种方式需要通过 OpenGL 直接在窗口中绘制 3D 场景。

只要勤加思考，肯定是都有方法去解决的，没有解决不了的事情，只有不会解决的人。

如需项目demo，微信扫下面的二维码，注册成功，到下面的我的-联系客服问我要代码
在这里插入图片描述