aframe-curve-component

A Curve component to draw curves with some extras in A-Frame.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
aframe-curve-component
2550.1.37 years ago7 years agoMinified + gzip package size for aframe-curve-component in KB

Readme

aframe-curve-component

Version License
A Curve component to draw curves in A-Frame. The component consists of multiple components:
  • curve: Draws a certain type of a curve and consists of multiple "curve-points"
  • curve-point: Defines the curve based on it's position. Multiple entities are added as children of the curve-entity.
  • draw-curve: Add's a Mesh to the curve to visualize it
  • clone-along-curve: Clones an Entity along the curve (e.g. to build a race track based on track parts)

For A-Frame.
Credits: Initial concept and development has been done by AdaRoseEdwards.

API (curve)

| Property | Description | Default Value | | -------- | ----------- | ------------- | | type | Type of the Curve to draw. One ff: 'CatmullRom', 'Spline', 'CubicBezier', 'QuadraticBezier', 'Line' | CatmullRom | | closed | Whether or not the curve should be drawn closed (connect the end and start point automatically) | false |

API (curve-point)

| Property | Description | Default Value | | -------- | ----------- | ------------- | | | | |

API (draw-curve)

| Property | Description | Default Value | | -------- | ----------- | ------------- | | curve | A Selector to identify the corresponding curve | '' |

API (clone-along-curve)

| Property | Description | Default Value | | -------- | ----------- | ------------- | | curve | A Selector to identify the corresponding curve | '' | | spacing | Spacing between the cloned entities in Meters | 1 | | rotation | Rotation of the cloned Entities | '0 0 0' | | scale | Scale of the cloned entities | '1 1 1' |

Installation

Browser

Install and use by directly including the browser files:
<head>
  <title>My A-Frame Scene</title>
  <script src="https://rawgit.com/aframevr/aframe/master/dist/aframe-master.min.js"></script>
  <script src="https://unpkg.com/aframe-curve-component/dist/aframe-curve-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-curve id="track1">
        <a-curve-point position="-1 1 -3"></a-curve-point>
        <a-curve-point position="1 1 -3"></a-curve-point>
    </a-curve>
    
    <!-- Draw the Curve -->
    <a-draw-curve curveref="#track1" material="shader: line; color: blue;"></a-draw-curve>
    
    <!-- Clone a Box along the Curve -->
    <a-entity clone-along-curve="curve: #track1; spacing: 0.2; scale: 1 1 1; rotation: 0 0 0;" geometry="primitive:box; height:0.1; width:0.2; depth:0.1"></a-entity>
  </a-scene>
</body>

npm

Install via npm:
npm install aframe-curve-component

Then require and use.
require('aframe');
require('aframe-curve-component');