Flutter如何集成three.js

我想在Flutter项目中集成three.js来实现3D效果，但不知道具体该如何操作。目前遇到几个问题：1) Flutter和three.js如何通信？2) 是否需要通过WebView来嵌入three.js？3) 有没有现成的插件或库可以简化集成过程？4) 性能方面会不会有较大损耗？希望有经验的开发者能分享一下具体的实现方案或最佳实践。

2 回复

Flutter可通过flutter_webview_plugin或webview_flutter加载three.js网页。步骤如下：

  1. 在pubspec.yaml添加webview插件依赖。
  2. 创建本地或远程HTML文件引入three.js库。
  3. 在Flutter中通过WebView加载该HTML文件。
  4. 使用JavaScript通道进行Flutter与three.js的通信。

更多关于Flutter如何集成three.js的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中集成three.js可以通过两种主要方式实现：

方法一：使用webview_flutter插件

这是最常用的方法，通过WebView加载包含three.js的HTML页面。

1. 添加依赖

dependencies:
  webview_flutter: ^4.4.2
  webview_flutter_android: ^2.11.2
  webview_flutter_wkwebview: ^2.17.1

2. 创建Flutter页面

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class ThreeJSWebView extends StatefulWidget {
  @override
  _ThreeJSWebViewState createState() => _ThreeJSWebViewState();
}

class _ThreeJSWebViewState extends State<ThreeJSWebView> {
  late WebViewController controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Three.js in Flutter')),
      body: WebView(
        initialUrl: 'about:blank',
        onWebViewCreated: (WebViewController webViewController) {
          controller = webViewController;
          _loadHtmlFromAssets();
        },
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }

  void _loadHtmlFromAssets() async {
    String html = await _loadAsset('assets/threejs_demo.html');
    controller.loadUrl(Uri.dataFromString(html,
        mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }

  Future<String> _loadAsset(String path) async {
    return await rootBundle.loadString(path);
  }
}

3. 创建HTML文件（assets/threejs_demo.html）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Three.js Demo</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // Three.js场景初始化
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        const 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;

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

方法二：使用flutter_webview_plugin（已弃用但简单）

dependencies:
  flutter_webview_plugin: ^0.4.0

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class ThreeJSPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: 'assets/threejs_demo.html',
      appBar: AppBar(title: Text('Three.js Demo')),
    );
  }
}

注意事项

  1. 权限配置：在android/app/src/main/AndroidManifest.xml中添加网络权限：
<uses-permission android:name="android.permission.INTERNET" />
  1. 资源文件：在pubspec.yaml中声明HTML资源：
flutter:
  assets:
    - assets/

  1. 性能考虑：WebView方式性能开销较大，适合展示相对简单的3D场景

  2. 通信：可以通过JavaScript通道实现Flutter与three.js的双向通信

这种方法让你能够在Flutter应用中展示three.js的3D图形，同时保持Flutter的UI框架优势。

回到顶部