****** 重要 ******
- 原始项目可在 ditredi 找到。
- 添加图层并根据图形对z-index进行排序,以修复两个图形足够接近时出现的渲染问题。
- 渲染优先级从高到低为:图层、图形的z-index,以及每个图形中的面的z-index。
DiTreDi (D 3D)
一个Flutter包,可在透明画布上显示大型3D数据集。
前言
DiTreDi的创建是为了高效地在3D空间中显示数据集和网格。它并非用于创建3D游戏引擎,而是更适合显示静态网格。
目录
入门
安装包.
为ditredi和vector_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à,将显示一个单独的立方体
注意:
DiTreDi占用所有可用空间。将其包装在SizedBox或Expanded中以控制其约束和大小。
控制器
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);
要处理输入手势,请使用GestureDetector或DiTreDiDraggable
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)),
],
)
Face3D
面(又称三角形)。
DiTreDi(
figures: [
Face3D(
Triangle.points(
Vector3(0, 0 - 1, 0 - 1),
Vector3(0, 0 - 1, 0 + 1),
Vector3(0, 0 + 1, 0 + 1),
),
),
],
)
Group3D
一组图形。
DiTreDi(
figures: [
Group3D([
Cube3D(1, Vector3(0, 0, 0)),
Cube3D(1, Vector3(3, 3, 3)),
]),
],
)
显示多个形状的另一种方法是将一些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)),
],
)
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),
],
)
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"))),
],
)
Plane3D
一个朝向x(左/右)、y(底/上)或z(近/远)轴的面。
DiTreDi(
figures: [
Plane3D(5, Axis3D.y, false, Vector3(0, 0, 0), color: Colors.green),
],
)
Point3D
一个点(实际上是一个正方形)。
DiTreDi(
figures: [
Plane3D(5, Axis3D.y, false, Vector3(0, 0, 0), color: Colors.green),
],
)
PointPlane3D
一个由点组成的平面(例如,用于显示对象)的比例。
DiTreDi(
figures: [
PointPlane3D(1, Axis3D.y, 0.1, Vector3(0, 0, 0), pointWidth: 5),
Cube3D(0.1, Vector3(0, 0, 0)),
],
)
变换
点和线框
每个图形都可以更改为点或线(线框)。
DiTreDi(
figures: [
...Plane3D(5, Axis3D.z, false, Vector3(0, 0, 0)).toPoints(),
],
)
DiTreDi(
figures: [
...Plane3D(5, Axis3D.z, false, Vector3(0, 0, 0)).toLines(),
],
)
矩阵变换
图形可以通过TransformModifier3D和Matrix4进行旋转、平移和缩放。
每个变换都是针对0,0,0坐标进行的。
DiTreDi(
figures: [
TransformModifier3D(
Cube3D(2, Vector3(1, 1, 1)),
Matrix4.identity()
..setRotationX(10)
..setRotationY(10)
..setRotationZ(10)),
],
)
要围绕其“自身”位置旋转图形,必须先平移、旋转,然后平移回原位。
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)),
],
)
转换Group3D以将矩阵应用于每个图形。
DiTreDi(
figures: [
Cube3D(2, Vector3(0, 0, 0)),
TransformModifier3D(
Group3D([
Cube3D(2, Vector3(2, 2, 2)),
Cube3D(2, Vector3(4, 4, 4)),
]),
transformation,
),
],
)
基准测试
待办















