flutter 3D动效之欧拉角和四元数

原创

已于 2023-09-12 18:12:06 修改 · 402 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

于 2023-09-11 22:19:35 首次发布

本文介绍了如何在Flutter应用中通过three_dart库实现实时步态采集数据的3D动画效果，包括使用欧拉角和四元组表示物体旋转，以及如何处理镜像反转和模型加载。

1、最近项目功能要实现步态采集实时传输数据3D动效，找了一只右脚的obj模型，展示左脚用到了镜像反转，数学知识欧拉角和四元组，首先介绍一下欧拉角和四元组的区别：

允澄 2023-09-09 22.30.22

“欧拉角是指三个旋转角度,分别为绕X轴旋转的角度、绕Y轴旋转的角度和绕Z轴旋转的角度,表示物体在空间中的位置和方向。而四元数是一种复数形式的数字,由实部和虚部组成,可以用来表示旋转。欧拉角比较直观,易于理解,但是欧拉角存在万向锁问题,即当某一轴旋转角度为90度时,其他两个轴的旋转将变得不可控。而四元数则没有万向锁问题,并且可以实现平滑旋转,因此在计算机图形学和游戏开发中被广泛应用

2、pubspec.yaml

three_dart: ^0.0.16
three_dart_jsm: ^0.0.10

3、下载three_dart，在MultiViews2里添加，3D模型下载链接

import 'dart:async';
import 'dart:convert';
import 'dart:math';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart' hide Matrix4;
import 'package:flutter/services.dart';

import 'package:flutter_gl/flutter_gl.dart';
import 'package:three_dart/three3d/math/index.dart';
import 'package:three_dart/three3d/math/matrix4.dart';
import 'package:three_dart/three_dart.dart' as three;
import 'package:three_dart_jsm/three_dart_jsm.dart' as three_jsm;

class MultiViews extends StatefulWidget {
  final String fileName;

  const MultiViews({Key? key, required this.fileName}) : super(key: key);

  @override
  State<MultiViews> createState() => _MyAppState();
}

class _MyAppState extends State<MultiViews> {
  three.WebGLRenderer? renderer;
  bool show = false;



  @override
  void initState() {
    super.initState();

    if (!kIsWeb) {
      init();
    }
  }

  init() async {
    var three3dRender = FlutterGlPlugin();
    await three3dRender.initialize(options: {"width": 1024, "height": 1024, "dpr": 1.0});
    await three3dRender.prepareContext();

    Map<String, dynamic> options = {
      "width": 1024,