Drawing lines

Let's 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:

    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 a material. For lines we have to use LineBasicMaterial.

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

After material we will need a Geometry with some vertices:

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

Note that lines are drawn between each consecutive pair of vertices, but not between the first and last (the line is not closed.)

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 that's left is to add it to the scene and call render.

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

You should now be seeing a arrow pointing upwards, made from two blue lines.