Three.js 入门(基础材质、贴图、纹理、环境、遮蔽光、透明度、高光贴图)

本篇主要学习内容 :

1. three常用的几种材质
2. 环境贴图、贴图、
3. 环境光、遮蔽光、透明度、高光贴图（纹理贴图）

点赞 + 关注 + 收藏 = 学会了

1.three常用的几种材质

1.1） 基础网格材质MeshBasicMaterial、漫反射网格材质MeshLambertMaterial、高光网格材质MeshPhongMaterial等网格材质他们都有一个共同的父类Material

1.2） MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等子类网格材质会从父类Material继承一些属性和方法，比如透明度属性.opacity、面属性.side、是否透明属性.transparent等等后面会学到我写了示例代码

2.环境贴图、贴图

2.1）环境贴图

如果你不设置任何光源和环境贴图，gltf模型默认PBR材质不会正常显示，一片漆黑。

不过你不设置任何光源，只设置环境贴图，物体表面也能看到。虽然环境贴图不是光源，但是会模拟物体周围环境的反射光。就好比你站在街上，周围房子、树木、马路也会反射光线到你身上。

通过.envMapIntensity可以调节环境贴图对模型外表面的影响程度,.envMapIntensity的值可以通过gui交互界面调节。

// 导入加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 实例化rgbeLoader
let rgbeLoader = new RGBELoader()
// 环境贴图
rgbeLoader.load('./texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', (envMap) => {
    // 设置球形映射
    envMap.mapping = THREE.EquirectangularReflectionMapping
    // 设置环境贴图
    scene.background = envMap
    // 场景设置环境贴图
    scene.environment = envMap
    // 设置plane环境贴图
    planeMaterial.envMap = envMap
})

3.环境光、遮蔽光、透明度、高光贴图 （纹理贴图）

3.1） 纹理贴图

通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，

通过设置纹理贴图各个参数来实现控制以上效果，往下继续学习吧

3.2）纹理对象Texture可以作为模型材质颜色贴图.map属性的值。

// 创建纹理加载器
let textureLoader = new THREE.TextureLoader()
// 加载纹理  基础纹理贴图 .map设置
let texture = textureLoader.load('./texture/watercover/CityNewYork002_COL_VAR1_1K.png')

3.3） 环境光

一般三维场景需要添加环境光，来整体调节三维场景的明暗，环境光强度可以通过参数2，或光照强度属性.intensity设置。

实际开发，可以先给一个大概的值，然后通过gui交互界面微调AmbientLight的光照强度属性.intensity。

const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);

3.3） 遮蔽光、遮蔽贴图、ao贴图

// 加载ao贴图 环境遮挡贴图
let aoMap = textureLoader.load('./texture/watercover/CityNewYork002_AO_1K.jpg')

3.4）透明度贴图

// 透明度贴图 灰度
let alphaMap = textureLoader.load('./texture/door/height.jpg')

3.3）高光

// 光照贴图
let lightMap = textureLoader.load('./texture/colors.png')
// 高光贴图
let specularMap = textureLoader.load('./texture/watercover/CityNewYork002_GLOSS_1K.jpg')

对应添加至材质的属性即可（这里需要文件的可以私我）

// 创建材质
let planeMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    // 贴图
    map: texture,
    // 允许透明
    transparent: true,
    //ao贴图 环境遮挡贴图
    aoMap: aoMap,
    aoMapIntensity: 1, //强度默认1
    // 透明度贴图
    // alphaMap: alphaMap,
    // 光照贴图
    // lightMap: lightMap,
    // 高光贴图
    specularMap: specularMap,
    // 反射强度
    reflectivity: 0.5,
})

通过gui我们还可以调试（回顾上节）
gui.add(planeMaterial, 'aoMapIntensity').min(0).max(1).name('ao强度环境遮挡贴图')
gui.add(planeMaterial, 'reflectivity').min(0).max(1).name('反射强度')