Splash

****** 重要 ******

  • 原始项目可在 ditredi 找到。
  • 添加图层并根据图形对z-index进行排序,以修复两个图形足够接近时出现的渲染问题。
  • 渲染优先级从高到低为:图层、图形的z-index,以及每个图形中的面的z-index。

DiTreDi (D 3D)

一个Flutter包,可在透明画布上显示大型3D数据集。

实时网页示例

示例源代码

前言

DiTreDi的创建是为了高效地在3D空间中显示数据集和网格。它并非用于创建3D游戏引擎,而是更适合显示静态网格。

目录

入门

安装包.

ditredivector_math_64添加导入

import 'package:ditredi/ditredi.dart';
import 'package:vector_math/vector_math_64.dart';

DiTreDi小部件添加到您的树中

DiTreDi(
    figures: [
        Cube3D(2, Vector3(0, 0, 0)),
    ],
)

voilà,将显示一个单独的立方体

Cube3D

注意:DiTreDi占用所有可用空间。将其包装在SizedBoxExpanded中以控制其约束和大小。

控制器

DiTreDiController控制场景的旋转、缩放和灯光。

要设置控制器,请将其引用保存在状态中并传递给controller参数。

// in a state
@override
void initState() {
    super.initState();
    controller = DiTreDiController();
}

DiTreDi(
    figures: [
        Cube3D(2, Vector3(0, 0, 0)),
    ],
    controller: controller,
)

准备就绪后,通过调用以下方法更新控制器状态:

controller.update(rotationY: 30, rotationX: 30);

Cube3D

要处理输入手势,请使用GestureDetectorDiTreDiDraggable

DiTreDiDraggable(
    controller: controller,
    child: DiTreDi(
        figures: [Cube3D(1, vector.Vector3(0, 0, 0))],
        controller: controller,
    ),
);

Config(配置)

DiTreDiConfig定义了组件的“默认值”——网格颜色、线条和点的宽度(如果未指定)。

// in a state

DiTreDi(
    figures: [
        Cube3D(2, Vector3(0, 0, 0)),
    ],
    config: DiTreDiConfig(
        supportZIndex: false,
    ),
)

如果要显示大型数据集且不关心绘制顺序,建议禁用z-index,这可以提高绘图速度(supportZIndex = false)。

形状

DiTreDi开箱即用支持以下形状:

Cube3D

只是一个立方体。

DiTreDi(
    figures: [
        Cube3D(2, Vector3(0, 0, 0)),
    ],
)

Cube3D

Face3D

面(又称三角形)。

DiTreDi(
    figures: [
        Face3D(
            Triangle.points(
                Vector3(0, 0 - 1, 0 - 1),
                Vector3(0, 0 - 1, 0 + 1),
                Vector3(0, 0 + 1, 0 + 1),
            ),
        ),
    ],
)

Face3D

Group3D

一组图形。

DiTreDi(
    figures: [
        Group3D([
            Cube3D(1, Vector3(0, 0, 0)),
            Cube3D(1, Vector3(3, 3, 3)),
        ]),
    ],
)

Group3D

显示多个形状的另一种方法是将一些figures放在一起

DiTreDi(
    figures: [
        Cube3D(1, Vector3(0, 0, 0)),
        Cube3D(1, Vector3(-3, 0, 0)),
        Cube3D(1, Vector3(3, 0, 0)),
        Cube3D(1, Vector3(0, -3, 0)),
        Cube3D(1, Vector3(0, 3, 0)),
        Cube3D(1, Vector3(0, 0, -3)),
        Cube3D(1, Vector3(0, 0, 3)),
    ],
)

Multiple figures

Line3D

一条线。

DiTreDi(
    figures: [
      Line3D(Vector3(0, 1, 0), Vector3(2, 1, 4), width: 8),
      Line3D(Vector3(0, 2, 0), Vector3(2, 2, 4), width: 6),
      Line3D(Vector3(0, 3, 0), Vector3(2, 3, 4), width: 4),
      Line3D(Vector3(0, 4, 0), Vector3(2, 4, 4), width: 2),
      Line3D(Vector3(0, 5, 0), Vector3(2, 5, 4), width: 1),
    ],
)

Line3D

Mesh3D

由面(三角形)组成的网格。您可以使用ObjParser从.obj文件内容加载它。目前,只支持材质(mtl)作为颜色。

从字符串obj内容加载

DiTreDi(
    figures: [
        Mesh3D(await ObjParser().parse(meshLines)),
    ],
)

从Flutter资源加载

DiTreDi(
    figures: [
        Mesh3D(await ObjParser().loadFromResources("assets/model.obj")),
    ],
)

从文件加载

DiTreDi(
    figures: [
        Mesh3D(await ObjParser().loadFromFile(Uri.parse("files/model.obj"))),
    ],
)

Torus Terrain

Plane3D

一个朝向x(左/右)、y(底/上)或z(近/远)轴的面。

DiTreDi(
    figures: [
        Plane3D(5, Axis3D.y, false, Vector3(0, 0, 0), color: Colors.green),
    ],
)

Plane3D

Point3D

一个点(实际上是一个正方形)。

DiTreDi(
    figures: [
        Plane3D(5, Axis3D.y, false, Vector3(0, 0, 0), color: Colors.green),
    ],
)

Plane3D

PointPlane3D

一个由点组成的平面(例如,用于显示对象)的比例。

DiTreDi(
    figures: [
      PointPlane3D(1, Axis3D.y, 0.1, Vector3(0, 0, 0), pointWidth: 5),
      Cube3D(0.1, Vector3(0, 0, 0)),
    ],
)

PointPlane3D

变换

点和线框

每个图形都可以更改为点或线(线框)。

DiTreDi(
    figures: [
      ...Plane3D(5, Axis3D.z, false, Vector3(0, 0, 0)).toPoints(),
    ],
)

DiTreDi(
    figures: [
      ...Plane3D(5, Axis3D.z, false, Vector3(0, 0, 0)).toLines(),
    ],
)

Lines

矩阵变换

图形可以通过TransformModifier3DMatrix4进行旋转、平移和缩放。

每个变换都是针对0,0,0坐标进行的。

DiTreDi(
    figures: [
        TransformModifier3D(
            Cube3D(2, Vector3(1, 1, 1)),
            Matrix4.identity()
              ..setRotationX(10)
              ..setRotationY(10)
              ..setRotationZ(10)),
    ],
)

Transformation

要围绕其“自身”位置旋转图形,必须先平移、旋转,然后平移回原位。

DiTreDi(
    figures: [
        Cube3D(2, Vector3(0, 0, 0)),
        TransformModifier3D(
            Cube3D(2, Vector3(2, 2, 2)),
            Matrix4.identity()
              ..translate(2.0, 2.0, 2.0)
              ..rotateZ(10)
              ..rotateX(10)
              ..translate(-2.0, -2.0, -2.0)),
    ],
)

Transformation

转换Group3D以将矩阵应用于每个图形。

DiTreDi(
    figures: [
        Cube3D(2, Vector3(0, 0, 0)),
        TransformModifier3D(
          Group3D([
            Cube3D(2, Vector3(2, 2, 2)),
            Cube3D(2, Vector3(4, 4, 4)),
          ]),
          transformation,
        ),
    ],
)

Transformation

基准测试

待办

GitHub

查看 Github