Flutter 3D渲染插件babylonjs_viewer的使用

babylonjs_viewer

babylonjs_viewer 是一个用于Flutter的3D模型查看器插件，基于BabylonJS Viewer。这个项目受到了 model_viewer Flutter pub包的高度启发。它是一个简单的模型查看器，在下一次发布中将实现JSON设置。

安装

在您的项目的 pubspec.yaml 文件中添加以下依赖项（并运行隐式命令 dart pub get）：

dependencies:
  babylonjs_viewer: ^1.2.0

1.2.0 版本的新特性

  • 升级了 babylon.viewer.js 到 v5.16.0
  • 添加了新的参数控制器 (WebViewController)
  • 添加了新的参数函数（压缩后的JavaScript）

为什么需要控制器？

控制器是可选的。您可以使用此控制器来运行JavaScript代码、返回上一页、获取当前URL、更改URL等，这些功能是WebView Flutter允许的操作。 函数也是可选的。您可以使用此参数向您的查看器添加JavaScript代码。示例可以在文档底部找到。

要求

Android 项目

在您的Android项目（android/app/build.gradle）中，将 “minSdkVersion” 设置为 19：

defaultConfig {
    applicationId "com.example.example"
    minSdkVersion 19
    targetSdkVersion 30
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

然后在您的Android清单文件（android/app/src/main/AndroidManifest.xml）中添加以下行：

<application
    android:label="example"
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true">

iOS 项目

转到信息.plist文件（ios/Runner/Info.plist），并添加以下行：

<key>io.flutter.embedded_views_preview</key>
<true/>

导入

现在您可以在Dart代码中使用：

import 'package:babylonjs_viewer/babylonjs_viewer.dart';

使用

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("BabylonJS Viewer")),
        body: BabylonJSViewer(
          src: 'https://models.babylonjs.com/boombox.glb', // 模型源地址
        ),
      ),
    );
  }
}

Asset, FILE 或 HTTP(s)

HTTP(s)

BabylonJSViewer(
  src: 'https://models.babylonjs.com/boombox.glb', // HTTPS链接
),

FILE

BabylonJSViewer(
  src: 'file:///path/to/MyModel.glb', // 本地文件路径
),

Asset

BabylonJSViewer(
  src: 'assets/MyModel.glb', // 资产目录中的模型
),

控制器和函数示例

在您的状态中添加以下内容：

WebViewController? _controller;

添加您的自定义JavaScript函数。这将在Flutter控制台中打印输出。

BabylonJSViewer(
  controller: (WebViewController controller) {
    _controller = controller; // 初始化控制器
  },
  functions: '''function sayHello() { Print.postMessage("Hello World!"); }''', // 自定义函数
  src: 'https://models.babylonjs.com/boombox.glb', // 模型源地址
),

在任何地方使用该函数：

ElevatedButton(
  onPressed: () {
    _controller?.runJavascript('''
sayHello(); // 调用自定义函数
''');
  },
  child: const Text("Run Function"), // 按钮文本
),

控制器和函数的使用案例

您可以访问babylonjs viewer的viewer变量。您可以在那里找到所有方法。

在这个示例中，展示了如何切换自动旋转。

BabylonJSViewer(
  controller: (WebViewController controller) {
    _controller = controller; // 初始化控制器
  },
  functions: '''
function toggleAutoRotate(texture) {
let viewer = BabylonViewer.viewerManager.getViewerById('viewer-id'); // 获取viewer实例
viewer.sceneManager.camera.useAutoRotationBehavior = !viewer.sceneManager.camera.useAutoRotationBehavior; // 切换自动旋转
}
''',
  src: 'https://models.babylonjs.com/boombox.glb', // 模型源地址
),

使用该函数：

ElevatedButton(
  onPressed: () {
    _controller?.runJavascript('''
toggleAutoRotate(); // 调用切换自动旋转函数
''');
  },
  child: const Text("Toggle"), // 按钮文本
),

更多关于Flutter 3D渲染插件babylonjs_viewer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter 3D渲染插件babylonjs_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用babylonjs_viewer插件来进行3D渲染的代码案例。babylonjs_viewer是一个允许你在Flutter应用中嵌入Babylon.js内容的插件。Babylon.js是一个强大的JavaScript库，用于创建3D图形和复杂的WebGL场景。

首先，确保你已经在你的Flutter项目中添加了babylonjs_viewer插件。你可以在你的pubspec.yaml文件中添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  babylonjs_viewer: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

接下来，我们将创建一个简单的Flutter应用，使用babylonjs_viewer来展示一个基本的Babylon.js场景。

1. 创建一个新的Flutter项目

如果你还没有Flutter项目，可以通过以下命令创建一个新的项目：

flutter create my_3d_app
cd my_3d_app

2. 编辑main.dart文件

打开lib/main.dart文件，并替换其内容为以下代码：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Babylon.js Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _babylonScript = '''
    var createScene = function () {
        var scene = new BABYLON.Scene(engine);

        var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2.5, 5, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);

        var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);
        light.intensity = 0.7;

        var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);

        return scene;
    };

    var engine = new BABYLON.Engine(canvas, true);

    var createEngine = function () {
        return engine;
    };

    window.addEventListener('DOMContentLoaded', (event) => {
        var canvas = document.getElementById('babylonCanvas');
        var engine = createEngine();
        var scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener('resize', function () {
            engine.resize();
        });
    });
  ''';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Babylon.js Example'),
      ),
      body: BabylonJSViewer(
        script: _babylonScript,
        width: double.infinity,
        height: double.infinity,
      ),
    );
  }
}

3. 运行应用

现在你可以通过运行flutter run来启动你的Flutter应用。你应该会看到一个包含简单3D球体的Babylon.js场景。

解释

  • BabylonJSViewer是一个Flutter小部件，它接受一个包含Babylon.js脚本的字符串。
  • _babylonScript变量包含了一个简单的Babylon.js脚本，该脚本创建了一个场景、相机、光源和一个球体。
  • window.addEventListener('DOMContentLoaded', ...)确保在DOM内容加载完成后执行Babylon.js的初始化代码。

通过这种方式，你可以在Flutter应用中嵌入和展示复杂的3D图形和WebGL场景。希望这个代码案例能够帮助你开始使用babylonjs_viewer插件进行3D渲染。

回到顶部