材质

材质可以看成是材料和质感的结合。在渲染程式中，它是表面各可视属性的结合，这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。Three.js给我们封装好了大部分的材质效果。

MeshBasicMaterial

这种材质是一种简单的材质，不会受到光的影响，直接看到的效果就是整个物体的颜色都是一样，没有立体的感觉。
set修改color，也可以赋值一个新的THREE.Color对象

var material = new THREE.MeshBasicMaterial({ color: 0x00ffff }) //设置初始的颜色为浅蓝色
material.color.set(0xff00ff)
material.color = new THREE.Color(0xff00ff) //将颜色修改为紫色

MeshNormalMaterial

这种材质会根据面的方向不同自动改变颜色，此材质不受灯光影响。

material = new THREE.MeshNormalMaterial() //创建材质

LineBasicMaterial 线条材质

要绘制线段，我们需要确定两个点，就是起点和终点，案例中我们使用了四个顶点创建了三条线。然后Geometry对象使用这组顶点配置几何体，实例化线的材质，最后使用THREE.Line生成线。

//添加直线
var pointsArr = [new THREE.Vector3(-10, 0, -5), new THREE.Vector3(-5, 15, 5), new THREE.Vector3(20, 15, -5), new THREE.Vector3(10, 0, 5)]
var lineGeometry = new THREE.Geometry() //实例化几何体
lineGeometry.setFromPoints(pointsArr) //使用当前点的属性配置几何体
var lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 }) //材质
line = new THREE.Line(lineGeometry, lineMaterial)
scene.add(line)

添加光

MeshBasicMaterial不会受光的影响，即使有光也不会影响它的效果，

//创建灯光
function initLight() {
  var light = new THREE.DirectionalLight(0xffffff) //添加了一个白色的平行光
  light.position.set(20, 50, 50) //设置光的方向
  scene.add(light) //添加到场景
  //添加一个全局环境光
  scene.add(new THREE.AmbientLight(0x222222))
}

MeshLambertMaterial 兰伯特材质

这种材质会对光有反应，但是不会出现高光，可以模拟一些粗糙的材质的物体，比如木头或者石头

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

MeshPhongMaterial 高光材质

这种材质具有高光效果，可以模拟一些光滑的物体的材质效果，比如油漆面，瓷瓦等光滑物体

material = new THREE.MeshPhongMaterial({ color: 0x00ffff })

MeshStandardMaterial 标准材质

// 纹理贴图
const factoryTextureLoader = textureLoader.load('/texture/factory_wall_diff.jpg', () => {
  console.log('纹理贴图加载完成！')
})
// 环境遮挡贴图
const factoryAoTextureLoader = textureLoader.load('/texture/factory_wall_ao.jpg')
// 置换贴图
const factoryDispTextureLoader = textureLoader.load('/texture/factory_wall_disp.jpg')
// 粗糙度贴图
const factoryRoughTextureLoader = textureLoader.load('/texture/factory_wall_rough.jpg')
// 金属度贴图
const factoryMetalTextureLoader = textureLoader.load('/texture/factory_wall_spec.jpg')
// 法线贴图
const factoryNorTextureLoader = textureLoader.load('/texture/factory_wall_nor_gl.jpg')

const cubeMaterial = new THREE.MeshStandardMaterial({
  color: '#fff',
  map: factoryTextureLoader,
  aoMap: factoryAoTextureLoader,
  aoMapIntensity: 1,
  displacementMap: factoryDispTextureLoader,
  displacementScale: 0.1,
  roughness: 0.5,
  roughnessMap: factoryRoughTextureLoader,
  metalness: 0.5,
  metalnessMap: factoryMetalTextureLoader,
  normalMap: factoryNorTextureLoader,
})
// 根据集合体和材质创建物体
const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial)
// 添加到场景中
scene.add(mesh)

键	作用	默认值
color	线条的十六进制颜色	0xffffff
map	设置纹理贴图	null
lightMap	设置光照贴图	null
lightMapIntensity	设置光照贴图强度	1
aoMap	设置环境遮挡贴图 ambient occlusion	null
aoMapIntensity	设置环境遮挡贴图强度	1
emissive	设置放射光颜色	0x000000
emissiveMap	设置放射光贴图	null
emissiveIntensity	设置放射光贴图强度	1
bumpMap	设置凸凹贴图	null
bumpScale	设置凸凹贴图比例	1
normalMap	设置法线贴图	null
normalScale	设置法线贴图比例	(1, 1)
displacementMap	设置置换贴图	null
displacementScale	设置置换比例	1
displacementBias	设置置换偏移	0
roughness	设置粗糙度贴图比例	0.5
roughnessMap	设置粗糙度贴图	null
metalness	设置粗金属贴图比例	0.5
metalnessMap	设置粗金属贴图	null
alphaMap	设置阿尔法贴图	null
envMap	设置环境贴图	null
combine	设置组合操作	THREE.MultiplyOperation
reflectivity	设置反射率	1.
refractionRatio	设置折射率	0.98
fog	定义材质颜色是否受全局雾设置的影响	true
shading	定义着色类型	THREE.SmoothShading
wireframe	渲染模型为线框	false
wireframeLinewidth	线框线宽	1
wireframeLinecap	定义线端的外观	'round'
wireframeLinejoin	定义线连接节点的外观	'round'
vertexColors	定义顶点如何着色	THREE.NoColors
skinning	定义材料是否使用皮肤	false.
morphTargets	定义材料是否使用 morphTargets	false
morphNormals	定义材料是否使用 morphNormals	false

贴图

const doorTextureLoader = loader.load('/imgCubeMinecraft_16_16.jpg')
// // 偏移
// doorTextureLoader.offset.set(0.5, 0.5)
// // 旋转
// doorTextureLoader.rotation = Math.PI / 4
// // 设置原点
// doorTextureLoader.center.set(0.5, 0.5)
// // 重复
// doorTextureLoader.repeat.set(2, 3)
// doorTextureLoader.wrapS = THREE.MirroredRepeatWrapping
// doorTextureLoader.wrapT = THREE.RepeatWrapping
// 显示算法
doorTextureLoader.minFilter = THREE.LinearFilter
doorTextureLoader.magFilter = THREE.LinearFilter
const cubeMaterial = new THREE.MeshBasicMaterial({
  color: '0xffff00',
  map: doorTextureLoader,
})

环境贴图

1. 六个面的环境贴图

const cubeTextureLoader = new THREE.CubeTextureLoader()
// 相对X轴正方向的面：posX; 相对Y轴负反向的面：negY；
const envMapTexture = cubeTextureLoader.load(['/texture/imgPX.jpg', '/texture/imgNX.jpg', '/texture/imgPY.jpg', '/texture/imgNY.jpg', '/texture/imgPZ.jpg', '/texture/imgNZ.jpg'])
// 给场景添加环境贴图
scene.background = envMapTexture
// 给场景里的所有物体都添加默认的环境贴图
scene.environment = envMapTexture

2. HDR方式 使用RGBELoader

// 加载HDR
const rgbeLoader = new RGBELoader()
rgbeLoader.loadAsync('/texture/xx.hdr').then((texture) => {
  // 更改纹理映射
  texture.mapping = THREE.EquirectangularReflectionMapping
  scene.background = texture
  scene.environment = texture
})