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、创建纹理贴图

//纹理贴图映射到- -个矩形平面上
    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();
})

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

1、ThreeJS的常见几何体

BufferGeometry和Geometry有什么不同？

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

ThreeJS 网格几何体(WireframeGeometry)

挤压几何体(ExtrudeGeometry)

车削几何体(LatheGeometry)

参数几何体(ParametricGeometry)

多面体(PolyhedronGeometry)

形状几何体(ShapeGeometry)

圆环扭结几何体(TorusKnotGeometry)

2、常见的材质

点材质 PointsMaterial

线材质

材质的基本属性

.size属性

材质透明度. opacity

深度测试.depthTest

3、创建纹理贴图

继续阅读

HDU 4719 Oh My Holy FFF

CSU 1561 (More) Multiplication

CSU 1563 Lexicography

HDU 4721 Food and Productivity

ZOJ 1041 Transmitters

CSU 1562 Fun House

CodeChef PALPROB Palindromeness

UVA 10344- 23 out of 5

ZOJ 1104 Leaps Tall Buildings

HDU 2821 Pusher

UVA 1401 Remember the Word

ZOJ 2748 Free Kick

CSU 1567 Reverse Rot

JAVA 系列——>开发工具IntelliJ IDEA的安装以及配置、快捷键IDEA 简介

UVA 519 Puzzle (II)

磁盘结构及在Linux中的命名

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

1、ThreeJS的常见几何体

BufferGeometry和Geometry有什么不同？

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

ThreeJS 网格几何体(WireframeGeometry)

挤压几何体(ExtrudeGeometry)

车削几何体(LatheGeometry)

参数几何体(ParametricGeometry)

多面体(PolyhedronGeometry)

形状几何体(ShapeGeometry)

圆环扭结几何体(TorusKnotGeometry)

2、常见的材质

​​点材质 PointsMaterial​​

​​线材质​​

材质的基本属性

.size属性

材质透明度. opacity

深度测试.depthTest

3、创建纹理贴图

继续阅读

点材质 PointsMaterial

线材质