three.js学习二——画线 - cytggit/Map-openlayers GitHub Wiki

• 定义点

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

画线

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

  // 声明一个几何体
  var geometry = new THREE.Geometry(); 
  // 定义线条颜色-由顶点决定
  var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
  geometry.colors.push( color1, color2 );
  // 定义生成线条的形状
  var p1 = new THREE.Vector3( -100, 0, 100 );
  var p2 = new THREE.Vector3(  100, 0, -100 );
  geometry.vertices.push(p1);
  geometry.vertices.push(p2);
  // 定义线条的材质
  var material = new THREE.LineBasicMaterial( { vertexColors: true } );

  // 定义线条
  var line = new THREE.Line( geometry, material, THREE.LinePieces );
  // 线条添加进场景
  scene.add(line);

实例

核心代码如下：

  function initObject() {
    for ( var i = 0; i <= 20; i ++ ) {
      var geometry = new THREE.Geometry();
      geometry.vertices.push( new THREE.Vector3( - 500, ( i * 50 ) - 500, 0 ) );
      geometry.vertices.push( new THREE.Vector3( 500, ( i * 50 ) - 500, 0 ) );
      var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
      geometry.colors.push( color1, color2 );
      var material = new THREE.LineBasicMaterial( { vertexColors: true,  opacity: 0.2 } );

      for(var j = 0; j <= 20; j ++ ){
        var line = new THREE.Line( geometry, material );
        line.position.z = ( j * 50 ) - 500;
        scene.add( line );
      }
    }
  }