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)

等等....