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.
| 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 |
| Property | Description | Default Value |
|---|---|---|
| Property | Description | Default Value |
|---|---|---|
| curve | A Selector to identify the corresponding 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' |
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>Install via npm:
npm install aframe-curve-componentThen require and use.
require('aframe');
require('aframe-curve-component');
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent