Flutter玩3d开心的玩

最新推荐文章于 2024-09-10 10:39:44 发布

置顶

路很长oO

最新推荐文章于 2024-09-10 10:39:44 发布

阅读量9.1k

点赞数 4

分类专栏： Flutter学习文章标签： Flutter三D Flutter 3D

本文链接：https://blog.csdn.net/m0_37667770/article/details/81042916

版权

这篇博客探讨了如何在Flutter中利用Vector3实现3D效果。作者通过介绍3D空间的基本原理，展示了如何借助Vector3类创建具有方向性和视角变化的3D相机和灯光。同时，结合CustomPaint和GestureDetector，实现了在Canvas上绘制并响应手势改变3D图像的功能。完整代码可以在作者的GitHub仓库找到。

摘要由CSDN通过智能技术生成

一，原理：
先上图：如下1
我的免费Flutter和Dart教学视频希望你一起学习，对你有所帮助：
https://space.bilibili.com/265453330?spm_id_from=333.788.b_765f7570696e666f.1
这里写图片描述

这里写图片描述

之所以区别于二维空间，三维（3d）具有向量，位置，体积，在Flutter里面我们可以发现提供了Vector3这个三维向量类：表示它具有位置，方向，欧拉角信息，和某些向量函数等，大学学过3dmax这些建模，比较了解。我们知道一个三维物体，可以让人视觉产生不同于二维物体，是因为它具有体积（体积是由我们人的视觉所看到的），光线。而在手机这个二维界面里面我们能看出它的体积和三维这个就借助于Vector3可以创建一个摄像机提供给我们不同的视角。

二，在Flutter提供的Vector3上面我们自定义我们自己的3d视角小部件。
准备实现的需求：
1.Vector3给我们提供了具有方向性的照相机和灯光.，用来不同的视角看3d。
2.CustomPaint提供了可以进行在Canvas画布上面进行绘制我们的显示。
3.GestureDetector提供我们在屏幕上的手势拖缀来给变和刷新我们3d图像。

 library flutter_3d_obj;

import 'dart:io';
import 'dart:math' as Math;
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:flutter/widgets.dart';
import 'package:meta/meta.dart';
import 'package:vector_math/vector_math.dart' show Vector3;
import 'package:vector_math/vector_math.dart' as V;
//1.0开始创建小部件
class Widght_3D extends StatefulWidget {
  Widght_3D(
      {@required this.size,
        @required this.path,
        @required this.asset,
        this.angleX,
        this.angleY,
        this.angleZ,
        this.zoom = 100.0}) {
    if (angleX != null || angleY != null || angleZ != null) {
      angleValue = false;
    }
  }

  Size size;
  bool asset;
  String path;
  double zoom;
  double angleX;
  double angleY;
  double angleZ;
  bool angleValue = true;

  @override
  _Widght_3DState createState() => new _Widght_3DState(path, angleValue, asset);
}

class _Widght_3DState extends State<Widght_3D&