Flutter如何集成three.js实现3D效果

在Flutter项目中，如何集成three.js来实现3D效果？目前尝试过webview_flutter加载three.js的网页，但性能较差且有兼容性问题。有没有更高效的方案，比如通过插件或直接嵌入three.js代码？最好能提供具体实现步骤或示例代码。

2 回复

Flutter可通过flutter_three插件集成three.js，或使用webview_flutter加载three.js的HTML页面。前者性能更好，后者兼容性强。推荐使用flutter_three直接渲染3D场景。

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


在Flutter中集成three.js实现3D效果，可以通过flutter_three或webview_flutter两种方式实现。以下是具体方法：

方法一：使用flutter_three插件（推荐）

这是专门为Flutter封装的Three.js插件，性能较好：

  1. 添加依赖
dependencies:
  flutter_three: ^0.8.0
  1. 基本使用示例
import 'package:flutter_three/flutter_three.dart';

class ThreeJSScene extends StatefulWidget {
  @override
  _ThreeJSSceneState createState() => _ThreeJSSceneState();
}

class _ThreeJSSceneState extends State<ThreeJSScene> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Three(
        onSceneCreated: (Scene scene) {
          // 创建场景
          final camera = PerspectiveCamera(75, 1, 0.1, 1000);
          camera.position.z = 5;
          
          // 创建立方体
          final geometry = BoxGeometry(1, 1, 1);
          final material = MeshBasicMaterial(color: 0x00ff00);
          final cube = Mesh(geometry, material);
          
          scene.add(cube);
          scene.setCamera(camera);
          
          // 动画循环
          scene.setAnimationLoop((delta) {
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
          });
        },
      ),
    );
  }
}

方法二：使用WebView加载Three.js网页

  1. 添加依赖
dependencies:
  webview_flutter: ^4.4.2
  1. 创建HTML文件 在assets文件夹创建three_scene.html：
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <div id="container"></div>
    <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.getElementById('container').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>
  1. 在Flutter中加载
import 'package:webview_flutter/webview_flutter.dart';

class WebViewThreeJS extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        initialUrl: 'asset:///assets/three_scene.html',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

两种方式对比

  • flutter_three：性能更好，与Flutter深度集成，支持热重载
  • webview_flutter：灵活性高，可以直接使用完整的Three.js生态，但性能稍差

注意事项

  1. 在pubspec.yaml中配置assets：
flutter:
  assets:
    - assets/
  1. 对于WebView方式，需要在Android的AndroidManifest.xml中添加网络权限：
<uses-permission android:name="android.permission.INTERNET"/>

推荐使用flutter_three以获得更好的性能和开发体验，它提供了更接近原生Three.js的API。

回到顶部