Skip to content

7dir/aframe-svgfile-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

aframe-svgfile-component

DEMO

Use SVG files in an AFrame scene. Lines are rendered using THREE.MeshLine, and polygons are normal THREE geometry objects. Supports only quite simple SVG files at the moment.

Usage

<!DOCTYPE html>
<html>
	<head>
		<title>My A-Frame Scene</title>
		<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
		
		<script src="aframe-svgfile-component.js"></script>
	</head>

<body>
  <a-scene antialias="true">    
        <a-entity svgfile="svgFile: ../assets/github.svg; width:10; color: red" position="0 0 -3" rotation="0 0 0"></a-entity>
  </a-scene>
</body>

API

Attribute Description Default
width Width of the image, in AFrame units (meters). Undefined
height Height of the image in AFrame units. If only one of height or width is specified, the other will be set using the image aspect ratio Undefined
color Default color for polygons and lines #c23d3e
debug Display wireframe instead of filled polygons? false
strokeWidthToAFrameUnits Conversion factor between SVG line weight units (pixels) and AFrame world units (meters) 0.01
opacity Controls opacity of entire image 1
curveQuality How many line segments per curve 20

Tip: Consider turning on full-scene antialiasing: <a-scene antialias="true" >

This component only supports farily simple SVG files. path and the geometric primitives (rect,line,circle, polygon, etc) are supported. image and text are not supported; these you should handle separately using AFrame's builtin image and text objects. Style support is very limited. The component tries to find the fill and stroke color, but it can only handle basic style attributes (like "fill" on a path) and does not read style or class information. Simple "transform='scale(.." and "transform='translate(...' element attributes are parsed.

If width or height are not specified, the image will render using a 1:1 mapping from SVG units (pixels) to AFrame units (meters). The image centers itself at its position coordinate.

TODO

  • three.js mesh extrude
  • Reduce dist/* filesize (improve use of uglifyify/babel/--exclude in build process)
  • improve support for styles (fill and stroke stuff)

Orignal by 7dir, extended by morandd

License

MIT