Drawing Lines

Let's say you want to draw a line or a circle, not a wireframe Mesh. First we need to setup the renderer, scene and camera (see the Creating a scene page).

Here is the code that we will use:

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

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

//create a blue LineBasicMaterial var material = new v3d.LineBasicMaterial({ color: 0x0000ff });

After material we will need a Geometry or BufferGeometry with some vertices (it's recommended to use a BufferGeometry as it's more performant, however for simplicity we'll use a Geometry here):

var geometry = new v3d.Geometry(); geometry.vertices.push(new v3d.Vector3(-10, 0, 0)); geometry.vertices.push(new v3d.Vector3(0, 10, 0)); geometry.vertices.push(new v3d.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 v3d.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 an arrow pointing upwards, made from two blue lines.