画线

假设你想画一条线或一个圆，而非一个线框网格(Mesh)。首先，我们需要设置 renderer 、 scene 和摄影机（请参见创建场景页面）。

下面是我们将使用的代码：


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();

接下来我们要做的是定义一个材质。线的材质，我们必须使用 LineBasicMaterial 或 LineDashedMaterial 。


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

设置材质之后，我们将需要一个带有一些顶点的几何体：


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);

注意，在每一个连续的顶点对之间画线，而不是在第一个顶点和最后一个顶点之间画线（这条线不是闭合的。）

现在我们有了两条线的点和一个材质，可以把它们放在一起形成一条线。


const line = new v3d.Line(geometry, material);

剩下的就是将其添加到场景中，并调用 render 。


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

您现在应该可以看到一个由两条蓝线构成的向上指向的箭头。