ThreeJs 繪製點、線、面

全部的三位物體都是由點構成，兩點構成線，三點構成面，ThreeJs又如何繪製出點、線、面呢 ？

在ThreeJs中：

• 模型由幾何體和材質構成
• 模型以何種形式（點、線、面）展現取決於渲染方式

1. 幾何體

首先咱們來建立一個自定義的幾何體

var geometry = new THREE.Geometry(); //聲明一個幾何體對象Geometry

THREE.Geometry是全部幾何體的基類，它有幾個重要的屬性：

• vertices : 數組，保存該幾何體下全部頂點（Vector3對象）
• colors : 數組，保存該幾何體下全部頂點的顏色信息（Color對象）
• faces : 數組，保存該幾何體下全部面信息（Face3對象）

此時該幾何體爲空，咱們須要建立一些點，而後綁定到該幾何體

var p1 = new THREE.Vector3( 0, 0, 0 );
var p2 = new THREE.Vector3( 50, 0, 50 );
var p3 = new THREE.Vector3( 50, 50, 50 );
var p4 = new THREE.Vector3( 0, 50, 0 );
//綁定頂點到幾何體
geometry.vertices.push(p1, p2, p3, p4);
//若是須要每一個點展現不一樣顏色，須要給每一個頂點添加顏色，也能夠經過材質設置統一顏色
geometry.colors = [
    new THREE.Color( 0xFF0000 ), 
    new THREE.Color( 0x00FF00 ), 
    new THREE.Color( 0x0000FF ), 
    new THREE.Color( 0xFFFF00 )
];

這裏建立了一個幾何體，接下來咱們把他以點的形式渲染到頁面上

    //若是以點的形式渲染，須要設置點對應材質
    var pointMaterial = new THREE.PointsMaterial({
        color: 0xFFFFFF,    //設置顏色，默認 0xFFFFFF
        vertexColors: true, //定義材料是否使用頂點顏色，默認false ---若是該選項設置爲true，則color屬性失效
        size: 5             //定義粒子的大小。默認爲1.0
    });
    //生成點模型
    var points = new THREE.Points(geometry, pointMaterial);
    //將模型添加到場景
    scene.add(points);

接下來咱們建立一個線模型

    //若是以線的形式渲染，須要設置線材質
    var lineMaterial = new THREE.LineBasicMaterial({
        color: 0xFFFFFF,      //設置顏色，默認 0xFFFFFF
        vertexColors: true,  //設置爲true線條會以兩點顏色漸變 ---若是該選項設置爲true，則color屬性失效
        linewidth: 5,        //線寬，window下不生效
    });

    var line = new THREE.Line(geometry, lineMaterial);
    scene.add(line);

再來建立一個網格（面）模型

    //建立一個面，參數爲幾何體頂點的索引
    var face1 = new THREE.Face3( 0, 1, 2 );
    //設置這個面的法向量
    face1.normal = new THREE.Vector3( 0, 0, -1 );
    //設置各個頂點對應顏色
    face1.vertexColors = [
      new THREE.Color(0xFF0000),
      new THREE.Color(0x00FF00),
      new THREE.Color(0x0000FF),
    ];
    geometry.faces.push(face1);
    //設置網格材質，這裏設置爲Lambert材質爲一種不發光材質
    var meshMaterial = new THREE.MeshLambertMaterial({
        vertexColors : THREE.VertexColors,
        side: THREE.DoubleSide
    });

    var mesh = new THREE.Mesh(geometry, meshMaterial);
    scene.add(mesh);

能夠看出以網格形式渲染須要先建立Face3對象，這是由於咱們幾何體的每一個面都有其對應的法向量，即設置以哪一個角度反射光線

Face3對象對應的屬性

• a，b，c ： 對應三角面的三個點（Vector3對象）
• color ：顏色
• normal ：該三角面的法向量（Vector3對象）
• vertexColors ： 設置三角面三個點對應的法向量（Vector3對象數組），一般一個面都有一個統一的法向量，即設置 normal 便可

---

以上是咱們建立自定義模型的基本操做，ThreeJs爲咱們提供了不少自帶的模型，咱們只須要調用API便可建立

• 盒子模型(BoxGeometry)

• 平面模型(PlaneGeometry)

• 球體模型(SphereGeometry)

等等....