Description:

three js svg

three_js_svg #



A type of three_js svg loader and exporter that allows users to add or export svgs to and from thier projects.

This is a dart conversion of three.js and three_dart, originally created by @mrdoob and has a coverted dart fork by @wasabia.
Getting started #
To get started add this to your pubspec.yaml file along with the other portions three_js_math, three_js_core, and three_js_core_loaders.
late Scene scene;

void init() {
scene = Scene();
scene.background = Color.fromHex32(0xf0f0f0);

final loader = SVGLoader();
final data = await loader.fromAsset('assets/${fileName}.svg');

List<ShapePath> paths = data!.paths;

Group group = Group();
group.scale.scale(0.25);
group.position.x = -25;
group.position.y = 25;
group.rotateZ(math.pi);
group.rotateY(math.pi);
//group.scale.y *= -1;

for (int i = 0; i < paths.length; i++) {
ShapePath path = paths[i];

final fillColor = path.userData?["style"]["fill"];
if (guiData["drawFillShapes"] == true && fillColor != null && fillColor != 'none') {
MeshBasicMaterial material = MeshBasicMaterial.fromMap({
"color":tmath.Color().setStyle(fillColor).convertSRGBToLinear(),
"opacity": path.userData?["style"]["fillOpacity"].toDouble(),
"transparent": true,
"side": tmath.DoubleSide,
"depthWrite": false,
"wireframe": guiData["fillShapesWireframe"]
});

final shapes = SVGLoader.createShapes(path);

for (int j = 0; j < shapes.length; j++) {
final shape = shapes[j];

ShapeGeometry geometry = ShapeGeometry([shape]);
Mesh mesh = Mesh(geometry, material);

group.add(mesh);
}
}

final strokeColor = path.userData?["style"]["stroke"];

if (guiData["drawStrokes"] == true &&
strokeColor != null &&
strokeColor != 'none') {
three.MeshBasicMaterial material = three.MeshBasicMaterial.fromMap({
"color":tmath.Color().setStyle(strokeColor).convertSRGBToLinear(),
"opacity": path.userData?["style"]["strokeOpacity"].toDouble(),
"transparent": true,
"side": tmath.DoubleSide,
"depthWrite": false,
"wireframe": guiData["strokesWireframe"]
});

for (int j = 0, jl = path.subPaths.length; j < jl; j++) {
Path subPath = path.subPaths[j];
final geometry = SVGLoader.pointsToStroke(subPath.getPoints(), path.userData?["style"]);

if (geometry != null) {
final mesh = three.Mesh(geometry, material);

group.add(mesh);
}
}
}
}

scene.add(group);
}
copied to clipboard
Usage #
This project is a svg model loader and exporter for three_js.
Example #
Find the example for this API here.
Contributing #
Contributions are welcome.
In case of any problems look at existing issues, if you cannot find anything related to your problem then open an issue.
Create an issue before opening a pull request for non trivial fixes.
In case of trivial fixes open a pull request directly.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter