带有 BabylonJS 查看器的 Flutter 3D 模型查看器-GLB下载网

babylonjs_viewer

带有 BabylonJS Viewer for Flutter 的 3D 模型查看器。这个项目的灵感很大程度上来自model_viewer flutter pub 包。它的简单模型查看器，下一个版本，json 设置将被隐含

Pub.dev

https://pub.dev/packages/babylonjs_viewer

安装

这将向包的 pubspec.yaml 添加如下行（并运行隐式 dart pub get）：

dependencies:
  babylonjs_viewer: ^1.3.0

1.3.0 中的新增功能

将依赖项更新到 webview_flutter 4.10.0

为什么我需要控制器

控制器是可选的。您可以使用此控制器运行 Javascript 代码、返回、获取当前 url、更改 url 以及 WebView Flutter 允许的许多其他内容。函数是可选的。您可以使用此参数将 javascript 代码添加到查看器。示例可以在本文档底部找到

要求

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

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

然后将行“android：usesCleartextTraffic=”true“”添加到您的 android 清单（android/app/src/main/AndroidManifest.xml）

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

在iOS项目上，转到info.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',
          ),
        ),
      );
    }
  }

资产、文件或 HTTP（s）

HTTP（s）

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

文件

  BabylonJSViewer(
    src: 'file:///path/to/MyModel.glb',
  ),

资产

  BabylonJSViewer(
    src: 'assets/MyModel.glb',
  ),

控制器和函数示例

添加到您的 pubspec.yamlwebview_flutter

dependencies:
  webview_flutter: ^4.10.0

将其添加到您的状态

import 'package:webview_flutter/webview_flutter.dart';

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 查看器的查看器变量。您可以在那里找到所有方法

在此示例中，向您展示如何切换自动旋转。

BabylonJSViewer(
  controller: (WebViewController controller) {
    _controller = controller;
  },
  functions: '''
function toggleAutoRotate(texture) {
let viewer = BabylonViewer.viewerManager.getViewerById('viewer-id');
viewer.sceneManager.camera.useAutoRotationBehavior = !viewer.sceneManager.camera.useAutoRotationBehavior
}
''',
  src:
      'https://models.babylonjs.com/boombox.glb',
),

使用此功能

ElevatedButton(
  onPressed: () {
      _controller?.runJavascript('''
toggleAutoRotate();
''');
  },
  child: const Text("Toggle")),

Name
马龙JD 更新 pubspec.yaml 中的 SDK 约束以支持 Dart 3.0.0 F2A8CEA · 7 months ago
.github 域名	创建FUNDING.yml	3 years ago
资产/查看器	删除不必要的地图文件	2 years ago
自由	将版本更新到 1.3.0 和 pubspec.yaml 中的依赖项;增强网络…	7 months ago
.gitignore 域名	忽略示例项目！	4 years ago
。元数据	第一次提交	4 years ago
CHANGELOG.md	将版本更新到 1.3.0 和 pubspec.yaml 中的依赖项;增强网络…	7 months ago
许可证	第一次提交	4 years ago
README.md	将版本更新到 1.3.0 和 pubspec.yaml 中的依赖项;增强网络…	7 months ago
pubspec.lock	将版本更新到 1.3.0 和 pubspec.yaml 中的依赖项;增强网络…	7 months ago
pubspec.yaml	更新 pubspec.yaml 中的 SDK 约束以支持 Dart 3.0.0	7 months ago