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)

等等....