line

Note: This documentation is for the old 1.0.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

The line component draws a line given a start coordinate and end coordinate using THREE.Line.

The raycaster component uses the line component for its showLine property, which is then used by the laser-controls component.

Example

<a-entity line="start: 0, 1, 0; end: 2 0 -5; color: red"
line__2="start: -2, 4, 5; end: 0 4 -3; color: green"></a-entity>

Note an entity can have multiple lines. The line mesh is set as line or line__<ID> in the entity’s object3DMap:

console.log(el.getObject3D('line'));
console.log(el.getObject3D('line__2'));

Properties

Property Description Default Value
start Start point coordinate. 0, 0, 0
end End coordinate. 0, 0, 0
color Line color. #74BEC1
opacity Line opacity. 1
visible Whether the material visible. true