Drawing Lines

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

Here is the code that we will use:


const renderer = new v3d.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(0, 0, 100);
camera.lookAt(0, 0, 0);

const 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
const material = new v3d.LineBasicMaterial({ color: 0x0000ff });

After material we will need a geometry with some vertices:


const points = [];
points.push(new v3d.Vector3(- 10, 0, 0));
points.push(new v3d.Vector3(0, 10, 0));
points.push(new v3d.Vector3(10, 0, 0));

const geometry = new v3d.BufferGeometry().setFromPoints(points);

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.


const 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.