WebGL/ThreeJS几何体、材质、纹理贴图，给几何体披上好看的外衣

1、ThreeJS的常见几何体

BufferGeometry和Geometry有什么不同？

如果你想简单理解BufferGeometry和Geometry有什么不同,就是两者的数据结构不同，缓冲类型几何体BufferGeometry相比普通几何体Geometry性能更好。Three.js渲染器在解析几何体对象的时候，如果几何体对象是普通几何体对象Geometry, Three.js的WebGL渲染器 会把普通几何体对象Geometry转化为缓冲类型几何体对象BufferGeometry,然后再提取BufferGeometry包含的顶点信息，这里可以看出来直接使用Buf fer Geometry解析的时候相对Geometrv少了一步,自然性能更高一些。

ThreeJS中的常见几何体

几何体名称	解释	方法实例
​​BoxGeometry​​	立方几何体	var geometry = new THREE.BoxGeometry(1,1,1 );
​​CircleGeometry​​	圆形几何体	var geometry =new THREE.CircleGeometry( 5, 32 );
​​ConeGeometry​​	圆锥几何体	var geometry = new THREE.ConeGeometry( 5, 20, 32 );
​​CylinderGeometry​​	圆柱几何体	var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
​​DodecahedronGeometry​​	十二面几何体	var geometry = new THREE.DodecahedronGeometry(12, 0);
​​EdgesGeometry​​	边缘几何体	var edges = new THREE.EdgesGeometry( geometry );
​​IcosahedronGeometry​​	二十面几何体	var geometry = new THREE.IcosahedronGeometry( 12, 0);
​​OctahedronGeometry​​	八面几何体	var geometry = new THREE.OctahedronGeometry(12, O );
​​PlaneGeometry​​	平面几何体	var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
​​RingGeometry​​	圆环几何体	var geometry = new THREE.RingGeometry( 1,5, 32);
​​SphereGeometry​​	球几何体	var geometry = new THREE. SphereGeometry( 5, 32, 32 ); :
​​TetrahedronGeometry​​	四面几何体	var geometry = new THREE.TetrahedronGeometry( 5, 32, 32 );
​​TextGeometry​​	文本几何体
​​TorusGeometry​​	圆环几何体	var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
​​TubeGeometry​​	管道缓冲几何体	var geometry =new THREE.TubeGeometry( path, 20, 2, 8, false );
​​WireframeGeometry​​	网格几何体	var geometry = new THREE.SphereBufferGeometry( 100, 100, 100 );

ThreeJS EdgesGeometry边缘几何体画一个立方体的边框

var edges = new THREE.EdgesGeometry( geometry,0); // 每个面都有斜线

var edges = new THREE.EdgesGeometry( geometry,1); // 去掉每个面的斜线

ThreeJS 网格几何体(WireframeGeometry)

挤压几何体(ExtrudeGeometry)

它是从一个二维图形创建出-个三维图形。譬如，我们可以先通过THREE . Shape对象，先创建一个二 维的图形，然后通过ExtrudeGeometry 将它拉伸为-一个三维图形。也可以先通过THREE. PlaneGeometry对象创建一个二维平面，然后再利用ExtrudeGeometry 进行拉伸。

车削几何体(LatheGeometry)

THREE.LatheGeometry允许你从一条光滑的曲线创建图形。此曲线是由多个点定义，通常称作样条曲线。然后再绕y轴旋转，就生成了一组车床类型的几何体模型。

参数几何体(ParametricGeometry)

使用THREE.ParametricGeometry可以根据传入的公式，计算出相应的几何体。这是一一个很 具有扩展性的几何体。

多面体(PolyhedronGeometry)

多面体是一种只有平面和直边的几何体。多数情况下我们不会使用这种几何体，因为three. js库为我们提供了几种特定的多面体，如: TetrahedronGeometry四面体、OctahedronGeometry八面体、DodecahedronGeometry十二面体、IcosahedronGeometry二十面体。

形状几何体(ShapeGeometry)

从一个或多个路径形状中创建一个单面多边形几何体。

圆环扭结几何体(TorusKnotGeometry)

这是一种比较特别的扭结，样子就像是一根管子绕着它自己转了几圈。

2、常见的材质

​​点材质 PointsMaterial​​

点材质比较简单,只有PointsMaterial ,通常使用点模型的时候会使用点材质PointsMaterial。
点材貭pointsMaterial的.size属性可以毎个点這染的方形区域尺寸像素大小。注意:血用到点模型対象。

var geometry = new THREE.Spher eGeometry(100，25，25); //创建一个球体几何对象
//创建一个点材质对象
var material = new THREE.PointsMaterial({
color: 0x0000ff， //颜色
size: 1, //点渲染尺寸
});
//点模型对象参数: 几何体
点材质
var point = new THREE . Points (geometry，materia1l);
scene. add(point); //网格 模型添加到场景中

​​线材质​​

线材质有基础线材质​​LineBasicMaterial​​​和虚线材质​​LineDashedMaterial​​​两个，通常使用使用Line等线模型才会用到线材质。
基础线材质LineBasicMaterial。注意:应用到线模型对象

var geometry = new THREE . Spher eGeometry(100，25， 25);//球体
//直线基础材质对象
var material = new THREE .L ineBasi cMaterial({
color: 0x0000ff
});
var line = new THREE.Line(geometry， material); //线模型对象
scene. add(1ine); //点模型添加到场景中

虚线材质L ineDashedMaterial

//虚线材质对象:产生虚线效果
var material = new THREE.LineDashedMaterial({
color: 0x0000ff,
dashSize: 10,//显示线段的大小。默认为3。
gapSize: 5,//间隙的大小。 默认为1
});
var line = new THREE.Line(geometry， material); //线模型对象
// computeL ineDistances方法计算L ineDashedMater ia1所需的距离数组
line. computeL ineDistances();

网格模型材质
Threejs提供的网格类材质比较多，网格材质涉及的材质种类和材质属性也比较多, -节课也无法讲解完，本节课先有一个感性的认知。
网格材质顾名思义，网格类模型才会使用的材质对象。注意:应用到网格模型对象基础网格材质对象​​​MeshBasicMaterial​​ ,不受带有方向光源影响，没有棱角感。

var material = new THREE.MeshBasicMaterial(l
    color: 0x0000ff
])

​​MeshLambertMaterial​​材质可以实现网格Mesh表面与光源的漫反射光照计算,了光照计算，物体表面分界的位置才产生棱角感。

var material = new THREE.MeshLambertMaterial({
    color:0x00ff00
})

高光网格材质​​MeshPhongMaterial​​​除了和​​MeshLambertMaterial​​一样可以实现光源和网格表面的漫反射光照计算,还可以产生高光效果(镜面反射)。

var material = new THREE .MeshPhongMaterial(l
    color:0xff0000
    specular :0x444444,//高光部分的颜色
    shininess:20,//高光部分的亮度，默认30
]);

 

材质的基本属性

如果你的javascript语言基础还可以，应该明白类、基类、子类、父类等概念。如果你有这些类的概念,那么在学习Threejs的过程中,如何查找Threejs文档将会比较顺利。
点材质​​​PointsMaterial​​​、基础线材质​​LineBasicMaterial​​​、基础网格材质​​MeshBasicMaterial​​​、高光网格材质​​MeshPhongMaterial​​​等材质都是父类Material的子类。
各种各样的材质子类都有自己的特定属性，比如点材质特有的尺寸属性.size、光网格材质特有的高光颜色属性. specular等等这些属性可以成为子类材质的私有属性。
所有子类的材质都会从父类材质Material继承透明度opacity、面side等属性,这些来自父类的属性都是子类共有的属性。

.size属性

在Three.js开发过程中你可能会遇到下面的问题，比如three.js矩形 平面planegeometry的网格模型插入场景看不到，一个球体或立方体网格模型如何背面显示贴图，正面不显示....对于这些问题可以通过Three.js材质对象.side属性来设置。
材质.side属性的具体介绍可以查看Threejs文档中所有材质对象的基类Material。
.side属性的属性值定义面的渲染方式前面后面或双面.属性的默认值是THREE.Frontside，表示前面.也可以设置为后面THREE.Backside或双面THREE.Doubleside

var material = new THREE.MeshBasicMaterial({
    color: 0xdd00ff,
    size: THREE.Doubleside
]);

材质透明度. opacity

通过材质的透明度属性. opacity可以设置材质的透明程度，. opacity属性值的范围是0.0~1.0, 0.0值表示完全透明, 1.0表示完全不透明，. opacity默认值1.0。
当设置. opacity属性值的时候，需要设置材质属性transparent值为true,如果材质的transparent属性没设置为true,材质会保持完全不适明状态。
在构造函数参数中设置transparent和. opacity的属性值.

var material = new THREE.MeshPhongMaterial(l
    color: 0x220000 ,
    // transparent设置为true,开启透明，否则opacity不起作用
    transparent: true ,
    //设置材质透明度
    opacity: 0.4
]);

通过访问材质对象属性形式设置transparent和.opacity的属性值 

// transparent没置カtrue,幵后透明，否則opacity不起作用
material.transparent = true;
// 设置材质透明度
material.opacity = 0.4;

深度测试.depthTest

depthTest depthWrite :绘制不透明物体时，深度测试开启是能保证正确的遮挡关系，绘制透明物体时，关掉深度测试就能看到透明物体之后的物体

3、创建纹理贴图

通过纹理贴图加载器​​TextureLoader​​​的load()方法加载一张图片可以返回一个纹理对象Texture,纹理对象Texture可以作为模型材质颜色贴图. map属性的值。
材质的颜色贴图属性. map设置后,模型会从纹理贴图上采集像素值,这时候-般来说不需要在设置材质颜色. color。. map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色贴图的颜色值RGB。

//纹理贴图映射到- -个矩形平面上
    var geometry = new THREE.PlaneGeometry(204，102); //矩形平面
    // TextureLoader创建一 个纹理加载器对象， 可以加载图片作为几何体纹理
    var textureLoader = new THREE.TextureLoader() ;
    //执行1oad方法，加载纹理贴图成功后，返回- -个纹理对象Texture
textureLoader.1oad('Earth. png', function(texture) {
    var material = new THREE .MeshL amber tMaterial({
    // color: 0x0000ff,
    //设置颜色纹理贴图: Textur e对象作为材质map属性的属性值
    map: texture,//设置 颜色贴图属性值
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    //纹理贴图加载成功后，调用渲染函数执行渲染操作
    // render();
})

我们可以设置纹理贴图是否可以重复
WrapS这个值定义了纹理贴图在水平方向上将如何包裹，在UV映射中对应于U。
WrapT这个值定义了纹理贴图在垂直方向上将如何包裹，在UV映射中对应于V。