画线

假设你想画一条线或一个圆,而非一个线框网格(mesh)。首先,我们需要设置webglrendererscene和摄影机(请参见创建场景页面)。

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

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

接下来我们要做的是定义一个材质。线的材质,我们必须使用LineBasicMaterialLineDashedMaterial

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

设置材质之后,我们将需要一个带有一些顶点的几何体GeometryBufferGeometry(建议使用BufferGeometry,因为它的性能更好,但是为了简单起见,我们将在这里使用Geometry):

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

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

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

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

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

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

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