Three.js 学习笔记

几何体、材质和纹理贴图

常见材质

1.点材质(PointsMaterial)

点材质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); 

2.线材质

线材质有基础线材质 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); 

3.虚线材质 LineDashedMaterial

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

4.网格模型材质

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 等材质都是父类Material的子类。
各种各样的材质子类都有自己的特定属性，比如点材质特有的尺寸属性 .size 、高光网格材质特有的高
光颜色属性 .specular 等等这些属性可以成为子类材质的私有属性。
所有子类的材质都会从父类材质Material继承透明度 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.transparent = true;
// 设置材质透明度
material.opacity = 0.4;

深度测试 .depthTest

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

创建纹理贴图

通过纹理贴图加载器TextureLoader的 load() 方法加载一张图片可以返回一个纹理对象Texture，纹理
对象 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();
})

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

重新为地板设置贴图，观察效果

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
　　}
}]}