第3章简单的材质和纹理贴图，给⼏何体披上好看的外⾐
1、常见的材质
点材质PointsMaterial
点材质⽐较简单，只有PointsMaterial，通常使⽤点模型的时候会使⽤点材质PointsMaterial。
点材质PointsMaterial的.size属性可以每个顶点渲染的⽅形区域尺⼨像素⼤⼩。
var geometry =new THREE.SphereGeometry(100,25,25);//创建⼀个球体⼏何对象
// 创建⼀个点材质对象
var material =new THREE.PointsMaterial({
color:0x0000ff,//颜⾊
size:1,//点渲染尺⼨
});
/
/点模型对象参数：⼏何体点材质
var point =new THREE.Points(geometry, material);
scene.add(point);//⽹格模型添加到场景中
线材质
线材质有基础线材质LineBasicMaterial和虚线材质LineDashedMaterial两个，通常使⽤使⽤Line等线模型才会⽤到线材质。
基础线材质LineBasicMaterial。
var geometry =new THREE.SphereGeometry(100,25,25);//球体
// 直线基础材质对象
var material =new THREE.LineBasicMaterial({
color:0x0000ff
});
var line =new THREE.Line(geometry, material);//线模型对象
scene.add(line);//点模型添加到场景中
虚线材质LineDashedMaterial。
// 虚线材质对象：产⽣虚线效果
var material =new THREE.LineDashedMaterial({
color:0x0000ff,
dashSize:10,//显⽰线段的⼤⼩。默认为3。
gapSize:5,//间隙的⼤⼩。默认为1
});
var line =new THREE.Line(geometry, material);//线模型对象
//  computeLineDistances⽅法计算LineDashedMaterial所需的距离数组
lineputeLineDistances();
⽹格模型材质
Threejs提供的⽹格类材质⽐较多，⽹格材质涉及的材质种类和材质属性也⽐较多，⼀节课也⽆法讲解完，本节课先有⼀个感性的认知。⽹格材质顾名思义，⽹格类模型才会使⽤的材质对象。
基础⽹格材质对象MeshBasicMaterial，不受带有⽅向光源影响，没有棱⾓感。
var material =new THREE.MeshBasicMaterial({
color:0x0000ff,
})
MeshLambertMaterial材质可以实现⽹格Mesh表⾯与光源的漫反射光照计算，有了光照计算，物体表⾯分界的位置才会产⽣棱⾓感。
var material =new THREE.MeshLambertMaterial({
color:0x00ff00,
});
⾼光⽹格材质MeshPhongMaterial除了和MeshLambertMaterial⼀样可以实现光源和⽹格表⾯的漫反射光照计算，还可以产⽣⾼光效果(镜⾯反射)。
var material =new THREE.MeshPhongMaterial({
color:0xff0000,
specular:0x444444,//⾼光部分的颜⾊
shininess:20,//⾼光部分的亮度，默认30
});
材质的基本属性
如果你的javascript语⾔基础还可以，应该明⽩类、基类、⼦类、⽗类等概念。如果你有这些类的概念，那么在学习Threejs的过程中，如何查Threejs⽂档将会⽐较顺利。
点材质PointsMaterial、基础线材质LineBasicMaterial、基础⽹格材质MeshBasicMaterial、⾼光⽹格材
质MeshPhongMaterial等材质都是⽗类的⼦类。
各种各样的材质⼦类都有⾃⼰的特定属性，⽐如点材质特有的尺⼨属性.size、⾼光⽹格材质特有的⾼光颜⾊属性.specular等等这些属性可以成为⼦类材质的私有属性。
所有⼦类的材质都会从⽗类材质继承透明度opacity、⾯side等属性，这些来⾃⽗类的属性都是⼦类共有的属性。
.side属性
在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,
// 前⾯FrontSide  背⾯：BackSide 双⾯：DoubleSide
side: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({
color:0x220000,
// transparent设置为true，开启透明，否则opacity不起作⽤
transparent:true,
// 设置材质透明度
opacity:0.4,
});
通过访问材质对象属性形式设置transparent和.opacity的属性值
// transparent设置为true，开启透明，否则opacity不起作⽤
// 设置材质透明度
material.opacity =0.4;
2、创建纹理贴图
通过纹理贴图加载器的load()⽅法加载⼀张图⽚可以返回⼀个纹理对象，纹理对象Texture可以作为模型材质颜⾊贴图.map属性的值。
材质的颜⾊贴图属性.map设置后，模型会从纹理贴图上采集像素值，这时候⼀般来说不需要在设置材质颜⾊.color。.map贴图之所以称之为颜⾊贴图就是因为⽹格模型会获得颜⾊贴图的颜⾊值RGB。
// 纹理贴图映射到⼀个矩形平⾯上
var geometry =new THREE.PlaneGeometry(204,102);//矩形平⾯
对象图片高清// TextureLoader创建⼀个纹理加载器对象，可以加载图⽚作为⼏何体纹理
var textureLoader =new THREE.TextureLoader();
// 执⾏load⽅法，加载纹理贴图成功后，返回⼀个纹理对象Texture
textureLoader.load('Earth.png',function(texture){
var material =new THREE.MeshLambertMaterial({
// color: 0x0000ff,
// 设置颜⾊纹理贴图：Texture对象作为材质map属性的属性值
map: texture,//设置颜⾊贴图属性值
});//材质对象Material
var mesh =new THREE.Mesh(geometry, material);//⽹格模型对象Mesh
scene.add(mesh);//⽹格模型添加到场景中
//纹理贴图加载成功后，调⽤渲染函数执⾏渲染操作
// render();
})
不同的⼏何体有不同的UV坐标来设置贴图和模型的映射规律，你可以尝试把颜⾊纹理贴图映射到不同的⼏何体上查看渲染效果。
var geometry =new THREE.BoxGeometry(100,100,100);//⽴⽅体
var geometry =new THREE.SphereGeometry(60,25,25);//球体
纹理对象Texture
如果你想进⼀步了解.map的属性值可以阅读下⾯的代码。
通过图⽚加载器可以加载⼀张图⽚，所谓纹理对象Texture简单地说就是，纹理对象Texture的.image属性值是⼀张图⽚。
// 图⽚加载器
var ImageLoader =new THREE.ImageLoader();
// load⽅法回调函数，按照路径加载图⽚，返回⼀个html的元素img对象
ImageLoader.load('Earth.png',function(img){
// image对象作为参数，创建⼀个纹理对象Texture
var texture =new THREE.Texture(img);
// 下次使⽤纹理时触发更新
var material =new THREE.MeshLambertMaterial({
map: texture,//设置纹理贴图
});
var mesh =new THREE.Mesh(geometry, material);//⽹格模型对象Mesh
scene.add(mesh);//⽹格模型添加到场景中
});
3、重新为地板设置贴图，观察效果
let buildingObjects = {
objects: [
{
objectName: 'floor',
objectType: 'cube',
length: 3400,
width: 1200,
height: 1,
position: {
x: 0,
y: 0,
z: 0
},
style:{
color: 0x5F7480,
image:'./res/floor.jpg',
allowRepeat:1
}
}
]
}
还记得上节课的时候我们的cube类：
/**
* ⽴⽅体类
* 我们⽣活中很多的物体都可以归结为⽴⽅体类，⽐如墙体，地板，窗户等都可看成是⽴⽅体类
* @param option
* @constructor
*/
function Cube(option){
this.length = option.length || 1;
this.width = option.width || 1;
this.height = option.height || 1;
this.Name = option.objName;
this.positionX = option.position.x || 0;
this.positionY = option.position.y || 0;
this.positionZ = option.position.z || 0;
this.style=option.style||{color:0xFF0000};
let ateMaterial(this.width,this.height,this.style);
let cubeGeometry = new THREE.BoxGeometry(this.length, this.height, this.width);
let cube = new THREE.Mesh( cubeGeometry, curmaterial );
cube.name=this.Name;
cube.position.x=this.positionX;
cube.position.y=this.positionY;
cube.position.z=this.positionZ;
return cube;
}
我们给地板加上⼀个纹理贴图，这样就可以让地板显⽰贴图了。
项⽬代码
如果⼤家需要更加详细的讲解和全部源代码的话，可以看⼀下我的⽹易云课堂。当然剩下的博客我也会把核⼼代码给⼤家列出来。⼤家可以看看我的⽹易云课堂

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。