How can I draw a line in a-frame?

Question

I'm trying to plot a line with this script:

var gScene = document.querySelector("a-scene");
var p2=document.createElement('a-entity');
p2.setAttribute('geometry',{primitive: 'line', start: "0 0 0", end: "10 0 0"});
p2.setAttribute('color', '#aaf');
gScene.appendChild(p2);

but i get this error and I don't know why:

core:a-node:error Failure loading node:   Error: Unknown geometry schema `line`
    at i.updateSchema (geometry.js:79:26)
    at initComponent (component.js:311:35)
    at i.updateProperties (component.js:302:12)
    at HTMLElement.value (a-entity.js:490:19)
    at HTMLElement.value (a-entity.js:463:14)
    at a-entity.js:249:14
    at a-node.js:127:21

Can someone help me

Thanks

Answer 1

Unless defined as a custom geometry, line is not a built-in geometry - there is a line component which you can use to draw a straight line:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

<a-scene>
  <a-entity line="start: -2 1.6 -2; end: 2 0 -2; color: red" 
            line__2="start: 2 1.6 -2; end: -2 0 -2; color: green"></a-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

---

If you want multiple points, then you can create a component which will create a THREE.Line consisting of multiple points:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("some-line", {
    init: function() {
      // create an array of points. 
      const points = [];
      points.push(new THREE.Vector3(-1.25, -0.35, 0));
      points.push(new THREE.Vector3(-1, 0.15, 0));
      points.push(new THREE.Vector3(-0.5, 0.25, 0));
      points.push(new THREE.Vector3(0, 1, 0));
      points.push(new THREE.Vector3(0.5, 0.25, 0));
      points.push(new THREE.Vector3(1, 0.15, 0));
      points.push(new THREE.Vector3(1.25, -0.35, 0));

      // create the line material
      const material = new THREE.LineBasicMaterial({color: 0x0000ff});
      // create the geometry from points
      const geometry = new THREE.BufferGeometry().setFromPoints(points);
      // create a THREE.Line from the geometry and material
      const line = new THREE.Line(geometry, material);
      // add it to this entity
      this.el.object3D.add(line);
    }
  })
</script>
<a-scene>
  <a-entity position="0 1.6 -2" some-line></a-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

---

Dynamically added from js:

const scene = document.querySelector("a-scene");
// when the scene is loaded
scene.addEventListener("loaded", () => {
  // create an entity
  const el = document.createElement("a-entity");
  // append it to the scene
  scene.appendChild(el);
  // set the position and line component
  el.setAttribute("position", "0 1.6 -2")
  el.setAttribute("some-line", "")
})

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("some-line", {
    init: function() {
      // create an array of points. 
      const points = [];
      points.push(new THREE.Vector3(-1.25, -0.35, 0));
      points.push(new THREE.Vector3(-1, 0.15, 0));
      points.push(new THREE.Vector3(-0.5, 0.25, 0));
      points.push(new THREE.Vector3(0, 1, 0));
      points.push(new THREE.Vector3(0.5, 0.25, 0));
      points.push(new THREE.Vector3(1, 0.15, 0));
      points.push(new THREE.Vector3(1.25, -0.35, 0));

      // create the line material
      const material = new THREE.LineBasicMaterial({color: 0x0000ff});
      // create the geometry from points
      const geometry = new THREE.BufferGeometry().setFromPoints(points);
      // create a THREE.Line from the geometry and material
      const line = new THREE.Line(geometry, material);
      // add it to this entity
      this.el.object3D.add(line);
    }
  })
</script>
<a-scene>
</a-scene>