Flutter 3D模型查看插件viewer3d的使用

Flutter 3D模型查看插件viewer3d的使用

什么是它？

在线测试

演示视频

如何使用？

Pub包

Center(
  child: View3D.me(),
)

Center(
  child: View3D.autoReset(200, 200, 60),
)

自定义设置

const View3D(
    this.width,
    this.height,
    this.thickness, {
    Key? key,
    this.sides,
    this.center = true,
    this.backgroundColor = Colors.transparent,
    this.resetTarget,
    this.reset = const ResetNormal(),
})

菜单布局

MenuLayoutj(
    home: _buildHome,
    menu: _buildMenu,
)

自定义菜单布局

const MenuLayoutj({
    required this.home,
    required this.menu,
    this.offsetPercent = .6,
    this.dragable = false,
    this.duration = 300,
    this.deform = const CubeDeform(),
    this.critical = .7,
    Key? key,
  })

示例代码

以下是完整的示例代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:viewer3d/viewer3d.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 应用程序的根部件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Viewer3D"),
      ),
      body: MenuLayoutj(
        home: _buildHome,
        menu: _buildMenu,
      ),
    );
  }

  Widget _buildHome(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(28.0),
          child: Container(
            width: double.infinity,
            height: 200,
            color: Colors.transparent,
            child: Center(
                child: TextButton(
              onPressed: () {
                MenuLayoutj.toggle(context);
              },
              child: Text("menu"),
            )),
          ),
        ),
        View3D.me(), // 显示3D模型的基本视图
      ],
    );
  }

  Widget _buildMenu(BuildContext context) {
    return GestureDetector(
      onTap: () {
        MenuLayoutj.toggle(context);
      },
      child: ColoredBox(
        color: Colors.red,
        child: SizedBox.expand(
          child: FlutterLogo(),
        ),
      ),
    );
  }
}

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

1 回复

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


viewer3d 是一个用于在 Flutter 应用中查看 3D 模型的插件。它支持多种 3D 模型格式，如 .obj, .fbx, .gltf, .glb 等。以下是如何在 Flutter 项目中使用 viewer3d 插件的详细步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 viewer3d 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  viewer3d: ^1.0.0  # 请使用最新版本

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

2. 导入插件

在需要使用 viewer3d 的 Dart 文件中导入插件：

import 'package:viewer3d/viewer3d.dart';

3. 使用 Viewer3D 组件

Viewer3D 是一个用于显示 3D 模型的组件。你可以通过指定 src 参数来加载 3D 模型文件。

class My3DViewer extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('3D Model Viewer'),
      ),
      body: Center(
        child: Viewer3D(
          src: 'assets/models/your_model.glb',  // 3D 模型文件路径
          backgroundColor: Colors.white,       // 背景颜色
          onViewerCreated: (controller) {
            // 当 Viewer 创建时调用
            print('Viewer created');
          },
        ),
      ),
    );
  }
}

4. 添加 3D 模型文件

将你的 3D 模型文件（如 .glb 或 .gltf）放在 assets 文件夹中，并在 pubspec.yaml 文件中声明：

flutter:
  assets:
    - assets/models/your_model.glb

5. 运行应用

现在你可以运行你的 Flutter 应用，并查看 3D 模型。

6. 其他功能

Viewer3D 组件还支持其他一些功能，例如：

  • 控制模型旋转：你可以通过 Viewer3DController 来控制模型的旋转、缩放等。
  • 加载远程模型：你可以通过指定一个 URL 来加载远程的 3D 模型。
  • 自定义背景：你可以通过 backgroundColor 参数来设置背景颜色。

示例代码

以下是一个完整的示例代码，展示了如何使用 Viewer3D 组件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '3D Model Viewer',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: My3DViewer(),
    );
  }
}

class My3DViewer extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('3D Model Viewer'),
      ),
      body: Center(
        child: Viewer3D(
          src: 'assets/models/your_model.glb',  // 3D 模型文件路径
          backgroundColor: Colors.white,       // 背景颜色
          onViewerCreated: (controller) {
            // 当 Viewer 创建时调用
            print('Viewer created');
          },
        ),
      ),
    );
  }
}
回到顶部