three.js 中文文档 5.绘制直线

5.绘制直线

标签： three.js

比如你想绘制一条直线或者一个圆，而不是网格状体。首先需要设置渲染器，场景和摄像机（参考第一节）

我们需要如下代码：

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

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

var scene = new THREE.Scene();

下一步就是确定材质。对于线条我们必须用 LineBasicMaterail 或者 LineDashedMaterial（虚线）。

//创建一个蓝色的线条基本材质
var material = new THREE.LineBasicMaterial({color:0x0000ff});

过后我们需要有数个顶点的 Geometry（几何体） 或BufferGeometry（缓冲几何体），推荐BufferGeometry，它显示更出色，为了简便，我们在这里用Geometry。

var geometry = new THREE.Geometry();
//Vector3 是三维矢量，参数理解为为x,y,z坐标
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));

注意到线条是按照顶点坐标连续连接起来的，而不包含起始点和结束点的那条线（线条不会闭合）

既然我们有了两条线段和一种材质，我们能把他们
合在一起形成一条轨迹线。

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

剩下的就是调用渲染器将它加入场景中

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

你能看到由两条蓝色线条组成的向上箭头。