绘制线条

假设你想绘制一条线或一个圆，而不是线框 `Mesh`。 首先我们需要设置渲染器、场景和相机（参见"创建场景"页面）。

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

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

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

const scene = new THREE.Scene();

接下来我们需要定义一个材质。对于线条，需要使用 `LineBasicMaterial` 或 `LineDashedMaterial`。

// 创建一个蓝色的 LineBasicMaterial
const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

有了材质之后，我们还需要一个带有顶点的几何体：

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

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

注意，线条是在每对相邻顶点之间绘制的，而不会连接首尾两个顶点（即线条不是闭合的）。

现在我们有了两条线段的顶点和一个材质，可以将它们组合成一条线：

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

剩下的就是将其添加到场景中并调用 `renderer.render()`。

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

现在你应该能看到一个由两条蓝色线段组成的向上箭头。