Version: latest

Line

<Line> on lumin

Description

The Line component renders a colored line. The Line component creates lines as a series of line segments. Line follows the order in which the points are added, and must have at least two points. Line color is a multiplier to the vertex color. Create disconnected lines by adding line breaks to the Line.

Example

import React from "react";
import { View, Line, Scene, Prism } from "magic-script-components";
export default class MyApp extends React.Component {
render() {
const points = [
[-0.35, -0.35, -0.2],
[0.35, 0.35, 0.2],
[-0.35, -0.35, 0.2],
[-0.35, 0.35, -0.2],
[0.35, -0.35, 0.2],
[-0.35, -0.35, -0.2]
];
return (
<Scene>
<Prism size={[1, 1, 0.5]} >
<View name="main-view" alignment={'center-center'}>
<Line points={points} color={[0.5, 1.0, 0.25, 0.8]} />
</View>
</Prism>
</Scene>
);
}
}

Common Events

Common Properties

Element Properties

NameTypeDefault ValueDescription
points[vec3]n/aSets the points that describe this series of line segments. The line follows the order in which the points are added. No line can exist if there is less than two points.