Drawing lines

Drawing Lines

Lets say you want to draw a line or a circle, not a wireframe geometry. First we need to setup Renderer,Scene and camera [see Getting Started](Getting Started) Here is the code that we will use for that in this tutorial.

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
    camera.position.set(0, 0, 100);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene = new THREE.Scene();

Next thing we will do is define material. For lines we have to use LineBasicMaterial.

    var material = new THREE.LineBasicMaterial({
        color: 0x0000ff,
    });

After material we will need a geometry. Lines are drawn: Between geometry.vertices[0] and geometry.vertices[1], Between geometry.vertices[1] and geometry.vertices[2], Between geometry.vertices[2] and geometry.vertices[3],and so on. But not from Between last and the first vertex.

    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(-10, 0, 0)));
    geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(0, 10, 0)));
    geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(10, 0, 0)));

Now that we have points for two lines, and a material. We can put them together to form a line.

    var line = new THREE.Line(geometry, material);

All thats left is to add it to the scene and call a render.

    scene.add(line);
    renderer.render(scene,camera);

If everything is ok you shoud be seing a blue arrow(pointing up) made out of two lines.