3d是由面构成，面由线构成，线由点构成，点是基础

1、在Threejs中定义一个点

三维空间中的某一个点可以用一个坐标点来表示。一个坐标点由x,y,z三个分量构成。在three.js中，点可以在右手坐标系中表示：
空间几何中，点可以用一个向量来表示，在Three.js中也是用一个向量来表示的，代码如下所示：

  1. THREE.Vector3 = function ( x, y, z ) {
  2.   this.x = x || 0;
  3.   this.y = y || 0;
  4.   this.z = z || 0;
  5. };

2、操作点（设置点的坐标）

  1. var point1 = new THREE.Vecotr3(4,8,9);
  1. var point1 = new THREE.Vector3();
  2. point1.set(4,8,9);

3、画条线（LineBasicMaterial）

老路子，先定义场景、相机、渲染器，再定义实体，最后将实体添加到场景中

  1. <body onload="threeStart();">
  2.     <div id="canvas-frame"></div>
  3. </body>
  1. // 初始化场景
  2. var scene;
  3. function initScene() {
  4.     scene = new THREE.Scene();
  5. }
  7. // 初始化相机
  8. var camera;
  9. function initCamera() {
  10.     camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  11.     camera.position.x = 0;
  12.     camera.position.y = 1000;
  13.     camera.position.z = 0;
  14.     camera.up.x = 0;
  15.     camera.up.y = 0;
  16.     camera.up.z = 1;
  17.     camera.lookAt({
  18.         x : 0,
  19.         y : 0,
  20.         z : 0
  21.     });
  22. }
  24. // 初始化渲染器
  25. var renderer;
  26. function initThree() {
  27.     width = document.getElementById('canvas-frame').clientWidth;
  28.     height = document.getElementById('canvas-frame').clientHeight;
  29.     renderer = new THREE.WebGLRenderer({
  30.         antialias : true
  31.     });
  32.     renderer.setSize(width, height);
  33.     document.getElementById('canvas-frame').appendChild(renderer.domElement);
  34.     renderer.setClearColor(0xFFFFFF, 1.0);
  35. }
  1. var cube;
  2. function initObject() {
  3.     // 创建一个几何体
  4.     var geometry = new THREE.Geometry();
  5.     // 设置线
  6.     var material = new THREE.LineBasicMaterial( { vertexColors: true } );
  7.     var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
  9.     // 线的材质可以由2点的颜色决定
  10.     var p1 = new THREE.Vector3( -100, 0, 100 );
  11.     var p2 = new THREE.Vector3(  100, 0, -100 );
  12.     geometry.vertices.push(p1);
  13.     geometry.vertices.push(p2);
  14.     geometry.colors.push( color1, color2 );
  16.     var line = new THREE.Line( geometry, material, THREE.LinePieces );
  17.     scene.add(line);
  18. }
  1. renderer.clear();
  2. renderer.render(scene, camera);
LineBasicMaterial( parameters ) parameters = {}
Parameters是一个定义材质外观的对象，它包含多个属性来定义材质，这些属性是：
Color 线条的颜色，用16进制来表示，默认的颜色是白色。
Linewidth 线条的宽度，默认时候1个单位宽度。
Linecap 线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果，如果线条很细，那么你几乎看不出效果了。
Linejoin 两个线条的连接点处的外观，默认是“round”，表示圆角。
VertexColors 定义线条材质是否使用顶点颜色，这是一个boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值。
Fog 定义材质的颜色是否受全局雾效的影响。

在Threejs中，一条线由点，材质和颜色组成。

4、绘制一个网格

  1. var cube;
  2. function initObject() {
  3.     var geometry = new THREE.Geometry();
  4.     geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
  5.     geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
  7.     for ( var i = 0; i <= 20; i ++ ) {
  8.         var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: '#FFFFFF', opacity: 0.2 } ) );
  9.         line.position.z = ( i * 50 ) - 500;
  10.         scene.add( line );
  12.         var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: '#FFFFFF', opacity: 0.2 } ) );
  13.         line.position.x = ( i * 50 ) - 500;
  14.         line.rotation.y = 90 * Math.PI / 180;
  15.         scene.add( line );
  16.     }
  17. }

image.png