Flutter 3D分子模型展示插件molecule_3d的使用

Flutter 3D分子模型展示插件molecule_3d的使用

特性

当前支持两种方法：

  1. 原子以圆圈形式绘制。
  2. 原子以多边形形式绘制（使用ditredi）。

我认为第一种方法比第二种更快。（我希望这是真的。我还没有进行测试。）

开始使用

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  molecular_viewer: ^0.0.1

使用示例

以下是使用 MolecularViewer 展示分子模型的基本示例：

import 'package:flutter/material.dart';
import 'package:molecule_3d/viewer2.dart';

final xyz = """
3
分子
O 0.0 0.0 0.0
H 0.76923944085 0.5935711586 0.0
H -0.76923944085 0.5935711586 0.0
""";

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final MolecularViewerController controller = MolecularViewerController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('分子模型展示'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              child: MolecularViewerDraggable(
                controller: controller,
                child: MolecularViewer(
                  atoms: loadXyz(xyz), 
                  controller: controller,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

更多关于Flutter 3D分子模型展示插件molecule_3d的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter 3D分子模型展示插件molecule_3d的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


molecule_3d 是一个用于在 Flutter 应用中展示 3D 分子模型的插件。它允许开发者轻松地将 3D 分子模型嵌入到应用中，并支持交互操作，如旋转、缩放等。以下是如何使用 molecule_3d 插件的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 molecule_3d 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  molecule_3d: ^0.0.1 # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 molecule_3d 插件。

import 'package:molecule_3d/molecule_3d.dart';

3. 使用 Molecule3D 小部件

你可以在你的 Flutter 应用中使用 Molecule3D 小部件来展示 3D 分子模型。

class MoleculeViewer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('3D Molecule Viewer'),
      ),
      body: Center(
        child: Molecule3D(
          assetPath: 'assets/molecules/water.pdb', // 分子模型文件路径
          backgroundColor: Colors.white,
          onSceneCreated: (Scene scene) {
            // 场景创建后的回调
            print('Scene created');
          },
        ),
      ),
    );
  }
}

4. 添加分子模型文件

把分子模型文件（如 .pdb 文件）放在 assets 文件夹中，并在 pubspec.yaml 中声明这些资源。

flutter:
  assets:
    - assets/molecules/water.pdb

5. 运行应用

现在你可以运行你的 Flutter 应用，并在应用中看到 3D 分子模型的展示。

6. 自定义与交互

Molecule3D 小部件支持多种自定义选项和交互操作。你可以通过设置不同的参数来调整模型的显示效果，如背景颜色、模型颜色、旋转速度等。

Molecule3D(
  assetPath: 'assets/molecules/water.pdb',
  backgroundColor: Colors.black,
  modelColor: Colors.blue,
  rotationSpeed: 0.5,
  onSceneCreated: (Scene scene) {
    // 场景创建后的回调
    scene.setRotation(0, 45, 0); // 设置初始旋转角度
  },
);

7. 支持的格式

molecule_3d 插件通常支持常见的分子模型文件格式，如 .pdb、.mol2、.xyz 等。具体支持的格式请参考插件的文档。

8. 处理用户交互

你可以通过 onSceneCreated 回调来处理用户交互，如点击、旋转、缩放等操作。

onSceneCreated: (Scene scene) {
  scene.onRotate = (double x, double y, double z) {
    print('Model rotated: $x, $y, $z');
  };
  scene.onZoom = (double scale) {
    print('Model zoomed: $scale');
  };
},
回到顶部