基础篇

顶点是什么

顶点几何体和geometry.attributes.position

顶点颜色geometry.attributes.color

顶点法向量geometry.attributes.normal

顶点复用geometry.index

基础篇

阅读顶点篇之前如果没有学习基础篇请先移步，方便了解学习环境：three.js基础篇

顶点是什么

基础篇中我们学会了网络模型mesh，网络模型基础包括了集合体Geometry和材质material。

其中几何体中我们可以很容易的使用BoxGeometry或者SphereGeometry创建柱状几何体或者球形几何体。

这些几何体其实都是通过顶点这个概念创建的，只不过它们在内部封装好了。

顶点几何体和geometry.attributes.position

面、线、点有效的几何体表达名为BufferGeometry

const geometry = new THREE.BufferGeometry()

当然它不像BoxGeometry或者SphereGeometry传递尺寸等参数就形成了几何体，它麻烦一些。

想要使用它我们得先借助js的内置对象Float32Array，32位浮点数对象生成一份矩阵数据。

  const vertices = new Float32Array([
            0, 0, 0, 
            50, 0, 0, 
            0, 100, 0, 
            0, 0, 10, 
            0, 0, 100, 
            50, 0, 10, 
  ]);

这份数据有什么用呢？

我们可以把它赋值给几何体属性值上的位置position。

当然还得使用到three能够搭配这份数据的方法BufferAttribute。

后面的3表示前面的数据3个为一组，一组3个数字分别代表一个点的xyz轴值，也就是这个模型总共包括了6个点。

  geometry.attributes.position = new THREE.BufferAttribute(vertices, 3)

我们先不加材质，渲染一下试试啥样。

顺便复习一下基础篇生成网络模型再把模型加进场景的代码。

    const mesh = new THREE.Mesh(geometry)
    scene.add(mesh)

会发现渲染出这几个点包围的图形，要明白最少三个点才可以包围出一个面。

我们如果旋转一下模型，往上转到底部，会发现这个面只有一个面能看见，背面看不见。

这是因为得在相应的材质上加上属性。

加上一个简单着色材质MeshBasicMaterial重新构建网络模型

注意这个材质不受光照影响，所以你现在可以看见颜色，等到后面介绍法向量时你可能会产生为啥现在可以看见光照的疑惑，这里已经先解释了。

        const material = new THREE.MeshBasicMaterial({
            color: 0x0000ff, //三角面颜色
            side: THREE.DoubleSide //两面可见
        })
        const mesh = new THREE.Mesh(geometry,material)
        scene.add(mesh)

现在有颜色了而且可以看见背面。

顶点颜色geometry.attributes.color

创建几何体时我们使用到了geometry.attributes.position，它可以设置顶点的位置，同理我们还可以设置顶点的颜色。

同样也是以定点为单位设置，借助Float32Array。

同样是3个数一组，不过这次的3个数代表的是3原色，一组三原色构成一个点的颜色，取值范围0-1。

       const colors = new Float32Array([
            1, 0, 0, //顶点1颜色
            0, 1, 0, //顶点2颜色
            0, 0, 1, //顶点3颜色
            1, 1, 0, //顶点4颜色
            0, 1, 1, //顶点5颜色
            1, 0, 1, //顶点6颜色
       ]);
       geometry.attributes.color = new THREE.BufferAttribute(colors, 3)

为了先理解顶点着色，我们还得改改材质和模型。

我们用点材质PointsMaterial代替简单材质，再使用Points模型代替mesh网络模型。

        const material = new THREE.PointsMaterial({
            vertexColors: THREE.VertexColors, 
            size: 10.0
        })
        const points = new THREE.Points(geometry, material)
        scene.add(points)

可以看见六个点分别着上对应的颜色。

我们可以不换材质，换回网络模型。

        const mesh = new THREE.Mesh(geometry, material)
        scene.add(mesh)

我们会发现当顶点颜色不同时，在顶点形成面的过程中会出现渐变，两个顶点形成线时会自动在中间自动插入过渡色，看起来就是渐变了。

顶点法向量geometry.attributes.normal

这个是法向量与光照有关，我们先把顶点着色改成全蓝。

之前用的MeshBasicMaterial不受光照影响看不出特别，随便换个MeshPhongMaterial材质好了。

去掉顶点着色，给材质颜色上个蓝色。

挪动一下下面两个点让两个面重合。

然后顺便加上环境光和点光源。

        const vertices = new Float32Array([
            0, 0, 0,
            50, 0, 0,
            0, 100, 0,
            0, 0, 0,
            0, 0, 100,
            50, 0, 0,
        ]);
        geometry.attributes.position = new THREE.BufferAttribute(vertices, 3)
        const material = new THREE.MeshPhongMaterial({
            color: 0x0000ff,
            side: THREE.DoubleSide
        })
        const mesh = new THREE.Mesh(geometry, material)
        scene.add(mesh)
        //环境光
        const ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        // 点光源
        const point = new THREE.PointLight(0xffffff);
        point.position.set(200, 400, 300); //点光源位置
        scene.add(point); //点光源添加到场景中

会发现乌漆嘛黑，没有光照效果，颜色都看不见，我们明明加上了光源为什么没有效果呢。

因为用BufferGeometry的话，如果需要用普通材质，想要看到光照效果，必须设置顶点法向量。

设置时沿着三个点顺时针构成面的这面也就是我们看见的正面，让法向量从它们的反面穿过来，这样子正面将会作为光照到的外面。

听不懂就算了直接设置看效果，设置的属性换成normal，这次的三个数代表一个法向量，不知道法向量先学习数学。

        const normals = new Float32Array([
            0, 0, 1, //顶点1法向量
            0, 0, 1, //顶点2法向量
            0, 0, 1, //顶点3法向量
            0, 1, 0, //顶点4法向量
            0, 1, 0, //顶点5法向量
            0, 1, 0, //顶点6法向量
        ]);
        geometry.attributes.normal = new THREE.BufferAttribute(normals, 3)

设置完就看见了，有棱角，有光照，我们分析一下法向量在哪里。

六个顶点的法向量是这样的，不明白原理知道怎么设置就行了。

顶点复用geometry.index

就在上面的例子，当两个三角形粘连的时候，每个三角形有两个顶点是重复了的。

因此我们没必要写出6个顶点，只要4个就可以表示同样的内容了。

把重复的顶点删除，再删除对应的法向量。

        const vertices = new Float32Array([
            0, 0, 0,
            50, 0, 0,
            0, 100, 0,
            // 0, 0, 0,
            0, 0, 100,
            // 50, 0, 0,
        ]);
        geometry.attributes.position = new THREE.BufferAttribute(vertices, 3)
        const normals = new Float32Array([
            0, 0, 1, //顶点1法向量
            0, 0, 1, //顶点2法向量
            0, 0, 1, //顶点3法向量
            // 0, 1, 0, //顶点4法向量
            0, 1, 0, //顶点5法向量
            // 0, 1, 0, //顶点6法向量
        ]);
        geometry.attributes.normal = new THREE.BufferAttribute(normals, 3)

然后就是使用我们的geometry.index来表明如何复用顶点。

根据顶点的数量选择类型数组Uint8Array、Uint16Array、Uint32Array。对于顶点索引而言选择整型类型数组，对于非索引的顶点数据，需要使用浮点类型数组Float32Array等。

这里的每个数字代表的是哪个顶点，我们上方设置了4个顶点，计数同数组从0开始，0、1、2三个顶点构成一个三角形，0，3，1三个顶点构成一个三角形。

        const indexes = new Uint16Array([
            0, 1, 2,
            0, 3, 1,
        ])
        geometry.index = new THREE.BufferAttribute(indexes, 1)