在现代应用开发中，3D模型展示和交互是一个令人兴奋的领域。Flutter作为一个跨平台的UI框架，能够帮助开发者快速构建精美的用户界面，而Three.js则是一个强大的JavaScript库，专门用于在网页上渲染3D图形。将这两者结合在一起，通过WebView实现桌面端3D模型展示和交互，是一个非常有趣的项目。
项目准备
首先，我们需要在Flutter项目中使用WebView。为了实现此功能，可以使用webview_flutter插件。接下来，我们还需要一个存放3D模型的HTML文件，这个文件中将使用Three.js来加载和渲染3D模型。
1. 创建Flutter项目
使用以下命令创建一个新的Flutter项目：
flutter create flutter_threejs_example
cd flutter_threejs_example
然后打开pubspec.yaml，添加webview_flutter依赖：
dependencies:
flutter:
sdk: flutter
webview_flutter: ^2.0.8
记得执行flutter pub get来安装依赖。
2. 创建HTML和JavaScript
在项目的根目录下，创建一个名为assets的文件夹，并在其中创建一个名为index.html的文件。这个HTML文件将加载Three.js并展示3D模型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Model Viewer</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
<script src="https://threejs.org/build/three.js"></script>
</head>
<body>
<script>
let scene, camera, renderer;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
animate();
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
window.onload = init;
</script>
</body>
</html>
在这个HTML文件中，我们创建了一个简单的3D立方体。你可以自行替换这里的模型和材质，以加载更复杂的3D模型（如.obj、.glb等格式）。
3. 在Flutter中加载WebView
接下来，我们将使用Flutter的WebView来加载此HTML文件，并显示在应用中。修改lib/main.dart如下：
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Three.js Example',
home: Scaffold(
appBar: AppBar(
title: Text('3D Model Viewer'),
),
body: WebView(
initialUrl: 'assets/index.html',
javascriptMode: JavascriptMode.unrestricted,
),
),
);
}
}
4. 资源加载
在pubspec.yaml中，确保已正确加载HTML文件：
flutter:
assets:
- assets/index.html
5. 运行应用
在完成上述步骤后，你可以使用以下命令在桌面端中运行你的应用：
flutter run -d windows
总结
通过上述步骤，我们成功地将Flutter与Three.js结合，创建了一个简单的桌面端3D模型展示应用。这种方法不仅可以展示基本的3D模型，还可以扩展为更复杂的交互，如模型旋转、缩放等。通过不断改进HTML和JavaScript代码，我们可以为最终用户提供丰富的3D体验。希望这个示例能够激发你的创造力，让你在Flutter应用开发中探索更多的可能性。
