Back to Aframe

line

docs/components/line.md

1.7.11.2 KB
Original Source

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

html
<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:

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

Properties

PropertyDescriptionDefault Value
startStart point coordinate.0 0 0
endEnd coordinate.0 0 0
colorLine color.#74BEC1
opacityLine opacity.1
visibleWhether the material visible.true