Three.js 自定义创建点，线，面，Geometry，法线，UV坐标，顶点颜色

概述

此章将介绍如何自定义创建点，线，面，Geometry，法线，UV坐标，顶点颜色。
任何一个模型都是由一个一个顶点来组成的，然后由顶点来组成线和面来生成的，在Three.js中，我们使用new THREE.Vector3()来创建一个顶点。

顶点

现在我们来创建4个顶点，顶点坐标分别为(0, 0, 0)，(10, 0, 0)， (0, 0, 10)， (10, 0, 10)

    let p1 = new THREE.Vector3(0, 0, 0);
    let p2 = new THREE.Vector3(10, 0, 0);
    let p3 = new THREE.Vector3(0, 0, 10);
    let p4 = new THREE.Vector3(10, 0, 10);

创建Geometry, 并将顶点添加到Geometry的顶点数组vertices中

	let geometry = new THREE.Geometry();
	// 顶点添加到Geometry的顶点数组vertices中
	geometry.vertices.push(p1, p2, p3, p4);

创建点模型对象

	// 必须使用对应点的材质，size为点的大小
	let  material = new THREE.PointsMaterial( {color: 'red', size:2} );
	
    let  mesh = new THREE.Points( geometry, material );
    scene.add( mesh );

geometry中打印结果为，可以在此处看见添加的几个顶点数据

使用顶点来创建面

在webgl中，面都是由3个顶点来创建的每一个三角形，上面我们创建了4个顶点，这里我们将这4个顶点来创建一个两个面，并对每个面使用不同的材质

new THREE.Face3(0, 2, 1, new THREE.Vector3(), new THREE.Color(), 0)中的0， 2， 1三个值分别对应顶点数组中的索引，对应的分别是P1, P3, P2三个点，此处创建顶点的时候需要使用逆时针的顺序，不然是看不见当前面的，具资料解释说是创建的面顺序会决定法线的方向，使用一下右手法则我们可以知道此处法线的方向是向上的，如果法线向下，那么我们的相机就需要在负Y轴才可以看到我们创建的face1, new THREE.Vector3()对应的是法线， new THREE.Color()对应的是面的颜色，0对应的是使用材质数组中的索引

	let face1 = new THREE.Face3(0, 2, 1, new THREE.Vector3(), new THREE.Color(), 0);
    let face2 = new THREE.Face3(1, 2, 3, new THREE.Vector3(), new THREE.Color(), 1);
    // 将面添加到geometry的facess数组中
    geometry.faces.push(face1, face2);
	// 创建两个材质
	let material1 = new THREE.MeshBasicMaterial( {color: 'green'} );
    let material2 = new THREE.MeshBasicMaterial( {color: 'red'} );
	// face1使用第一个材质，face2使用第二个材质
    let mesh = new THREE.Mesh( geometry, [material1, material2] );

最终效果：

打印结果为：

面使用顶点颜色渲染

此处我们将创建4中顶点颜色并在面的顶点颜色数组中添加对应的颜色

	let color1 = new THREE.Color(0xFF0000);
    let color2 = new THREE.Color(0x00ff00);
    let color3 = new THREE.Color(0x0000ff);
    let color4 = new THREE.Color(0x00ffff);
    // 面添加顶点颜色，此面的材质颜色使用顶点渲染
    face1.vertexColors.push(color1, color2, color4);

修改材质1来使用顶点着色，只有选择使用顶点着色后vertexColors数组才会起作用

	// vertexColors: THREE.VertexColors 使用顶点颜色进行插值渲染
    let material1 = new THREE.MeshBasicMaterial( {vertexColors: THREE.VertexColors} );

最终效果，可以看到face1为三个顶点的颜色插值来渲染的，face2保持原来的不变

打印结果为

面使用面颜色渲染

在这之前，我们分别使用了材质的颜色来渲染面，顶点颜色来渲染面，此处还有一种，就是使用在定义面的时候new THREE.Color()来渲染

    // new THREE.Color(0x00ff00) 将当前面的颜色给定义为红色
	let face1 = new THREE.Face3(0, 2, 1, new THREE.Vector3(), new THREE.Color(0x00ff00), 0);
	// 顶点颜色数组需要删除掉，不然还是会使用顶点颜色数组
	// face1.vertexColors.push(color1, color2, color4);
	// 将材质1的来使用面着色
	let material1 = new THREE.MeshBasicMaterial( {vertexColors: THREE.FaceColors} );

最终效果：

面添加法线

在创建的face3面中添加法线，没有法线的面是无法接收到光照的
创建唯一的光源

	const directionalLight = new THREE.DirectionalLight( '#fff' )
    directionalLight.position.set( 30, 30, 30 ).normalize()
    scene.add( directionalLight )

将face1添加new THREE.Vector3(0, 1, 0)方向的法线，face2添加new THREE.Vector3(0, -1, 0)方向的法线

	// 点的顺序决定法线的方向
    let face1 = new THREE.Face3(0, 2, 1, new THREE.Vector3(0, 1, 0), new THREE.Color(), 0);
    let face2 = new THREE.Face3(1, 2, 3, new THREE.Vector3(0, -1, 0), new THREE.Color(), 1);

定义两个材质，MeshLambertMaterial材质可以接受光照

	let material1 = new THREE.MeshLambertMaterial( {color: 'yellow'} );
    let material2 = new THREE.MeshLambertMaterial( {color: 'red'} );

最终效果：

可以看到最后法线向上的显示了出颜色，法线向下的是黑色，不是显示红色

自定义UV贴图

先定义四个UV坐标，xy分别为0~1， 分别为p1和p4的4个顶点的坐标

	let uv1 = new THREE.Vector2(0, 1);
    let uv2 = new THREE.Vector2(1, 1);
    let uv3 = new THREE.Vector2(0, 0);
    let uv4 = new THREE.Vector2(1, 0);

在geometry的faceVertexUvs数组中添加UV坐标

	geometry.faceVertexUvs[0].push([uv1, uv3, uv2])
    geometry.faceVertexUvs[0].push([uv2, uv3, uv4])

定义贴图和材质

	let loader = new THREE.TextureLoader();
    let texture = loader.load('ground.jpg');
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
	let material1 = new THREE.MeshBasicMaterial( {map: texture} );
    let material2 = new THREE.MeshBasicMaterial( {map: texture} );

最终效果：

打印结果为