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

本文档介绍了如何在Flutter中使用three_model_viewer插件来加载和查看3D模型。

特性

three_model_viewer插件允许用户在Flutter应用中轻松加载和交互3D模型。以下是该插件的一些主要功能：

- 支持GLB/GLTF格式的3D模型。 - 可以播放动画。 - 支持相机控制（缩放、旋转等）。 - 提供灯光效果。

开始使用

在开始之前，请确保您的开发环境已正确配置。您需要安装Flutter SDK并设置好Android Studio或VS Code。

1. 在`pubspec.yaml`文件中添加以下依赖项： ```yaml dependencies: three_model_viewer: ^0.0.1 ``` 2. 运行`flutter pub get`以安装依赖项。

使用示例

以下是一个完整的示例代码，展示如何使用three_model_viewer插件加载和查看3D模型：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:three_model_viewer/three_model_viewer.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: '3D 模型查看器示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: Text('打开模型'),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(builder: (context) => Model()),
            );
          },
        ),
      ),
    );
  }
}

class Model extends StatefulWidget {
  const Model({Key? key}) : super(key: key);

  [@override](/user/override)
  State<Model> createState() => _ModelState();
}

class _ModelState extends State<Model> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.teal[900],
        body: ModelViewer(
          models: [
            ThreeModel(
              src:
                  'https://storage.googleapis.com/flutter-futx.appspot.com/test/FutX_Junto_meioTermo.glb', // 替换为您的3D模型路径
              playAnimation: true, // 是否自动播放动画
            ),
          ],
          cameraConfig: PerspectiveCameraConfig.def(), // 默认透视相机配置
          onPageLoaded: (controller) {
            // 设置相机参数
            controller.setOrbitControls(
              OrbitControls(minPolarAngle: pi / 2, maxPolarAngle: pi / 2),
            );
            controller.setBackgroundColor('#000', 0); // 设置背景颜色
            controller.setControlsTarget(Vector3(x: 1, y: 2, z: 3)); // 设置控制目标位置
            controller.addAmbientLight('#404040', 2); // 添加环境光
            controller.addDirectionalLight(DirectionalLight( // 添加方向光
              color: Colors.white,
              intensity: 2,
              pos: Vector3(x: 10, y: 20, z: 30),
            ));
            controller.enableZoom(true); // 启用缩放功能
          },
          onObjectLoading: (percentage) {
            print('$percentage%'); // 打印加载进度
          },
          onServerReady: (ready) => print('服务器准备完成: $ready'), // 打印服务器状态
          showWhenLoading: const Center(
            child: SizedBox(
              width: 100,
              height: 100,
              child: CircularProgressIndicator(), // 加载时显示的指示器
            ),
          ),
        ),
      ),
    );
  }
}