7dir/aframe-svgfile-component

aframe svgfile

aframe-svgfile-component's Issues

strokeWidthToAFrameUnits can probably be replaced using overall image pixel:meters scaling

animation

http://mattdesl.github.io/svg-mesh-3d/

Width or Height demo

three.js mesh extrude

https://github.com/JosePedroDias/aframe-extrude-and-lathe

add to aframe-awesome

browser file

Could you put up a complete .js we can include using just a <script> tag? (with the RegisterComponent and the threejs require()'s included). many thanks

add demo with warnings if the SVG contains or other currently unsupported tags

add support for lines

Currently all paths are assumed to be closed and rendered as polygons. Would be better to check the "fill" attribute of the path and in the case that the path is not filled, it is a line, then we can use:
https://github.com/andreasplesch/aframe-meshline-component

to render lines, with line thickness (since webgl doesn't support line thickness).

This component doesn't support curves. So we'd need to look for "C", "c", "A", etc, in the SVG path and if we find these, interpolate to line segments. This can be done by putting the SVG curve into a new Three.CubicBezierCurve, then using Three.Curve.getSpacedPoints to interpolate into line segments that can be fed into aframe-meshline. Alternatively, this logic could be added to meshline, so that meshline can accept "C" commands in its path instead of just linear segments (see suggestion andreasplesch/aframe-meshline-component#8)

debug demo

The image is rendered as inverted 180 degrees

i tried to draw the map of alaska using this. But the map is inverted 180 degrees. If i change the rotation, nothing is getting displayed. Attached the image drawn

width and height should be done using the "scale" component

Currently I implemented width and height by rescaling each vertex in the underlying mesh. Would be cleaner to leave these untouched and simply create or adjust the "scale" component of the AFrame entity.