【可视化学习】06-Three.js材质和纹理 | blog-of-codesigner(顾炯洋)

初识材质与纹理

使用纹理，只需要导入纹理加载器和图片即可，基于上一篇文章中的基础代码，这里只修改物体部分

// 导入纹理加载器
const textureLoader = new THREE.TextureLoader()
// 导入门的图片
const doorColorTexture = textureLoader.load("./textures/door/color.jpg")
// 创建一个立方体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({
    color: "#ffff00",
    map: doorColorTexture
})
// 根据几何体和材质创建一个物体
const cube = new THREE.Mesh(cubeGeometry, basicMaterial)
// 将物体添加到场景中
scene.add(cube)

材质的属性

偏移

偏移属性可以让纹理的位置发生偏移，这里的偏移是相对于纹理的，而不是相对于物体的

// 设置纹理偏移
// x轴偏移0.5
doorColorTexture.offset.x = 0.5
// y轴偏移0.5
doorColorTexture.offset.y = 0.5、
// 也可以使用set方法
doorColorTexture.offset.set(0.5, 0.5)

旋转

// 设置纹理旋转
// 设置旋转的原点(默认旋转是（0,0）这个点)
doorColorTexture.center.set(0.5,0.5)
// 旋转45度
doorColorTexture.rotation = Math.PI / 4

重复

//设置纹理的重复（水平2次，垂直3次）
doorColorTexture.repeat.set(2, 3);
// 设置纹理重复的模式(wrapS是水平方向，wrapT是垂直方向)
doorColorTexture.wrapS = THREE.MirroredRepeatWrapping // 镜像重复
doorColorTexture.wrapT = THREE.RepeatWrapping; //无限重复

设置纹理显示算法与mipmap

当我们放置一张很小的贴图，如16px*16px的贴图，放大之后，这时候我们会发现，贴图会自动变化，一个很大的图片，但是放置离我们很远，会变得很小，实现这个的底层逻辑就是纹理显示算法，这里我们可以设置纹理显示算法，来改变这种效果，具体可参考官方文档纹理显示算法

//texture纹理显示设置
// texture.minFilter = THREE.NearestFilter;
// texture.magFilter = THREE.NearestFilter
// 默认效果
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;

透明材质与透明纹理

如果我们只想要上面纹理中的门的部分，多出来的不要，这时候我们就需要使用透明材质和透明纹理的知识,首先我们需要这样一张图片，白色的表示需要的，黑色的表示不需要的

//导入纹理
const textureLoader = new THREE.TextureLoader()
// 导入门的图片
const doorColorTexture = textureLoader.load("./textures/door/color.jpg")
// 透明纹理
const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg")
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质（alphaMap:透明贴图，要使用透明，必须开启transparent）
const basicMaterial = new THREE.MeshBasicMaterial({
    color: "#ffff00",
    map: doorColorTexture,
    alphaMap: doorAplhaTexture,
    transparent: true,
})
const cube = new THREE.Mesh(cubeGeometry, basicMaterial)
scene.add(cube)

这时，我们就可以添加一个这样的平面

1
2
3

const plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(1, 1), basicMaterial)
plane.position.set(3, 0, 0)
scene.add(plane)

但是，这样的平面只是单面的，旋转之后是看不见的(因为怕影响性能，默认是单面的)，这时候我们就需要使用双面材质

const basicMaterial = new THREE.MeshBasicMaterial({
    color: "#ffff00",
    map: doorColorTexture,
    alphaMap: doorAplhaTexture,
    transparent: true,
    side: THREE.DoubleSide // 双面材质 
})

环境遮挡贴图

环境遮挡贴图，是一张灰度图，灰度图的颜色越浅，表示遮挡越少，越深，表示遮挡越多，这里我们使用一张这样的图片

//导入纹理
const textureLoader = new THREE.TextureLoader()
// 门贴图
const doorColorTexture = textureLoader.load("./textures/door/color.jpg")
// 透明贴图
const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg")
// 环境贴图
const doorAoTexture = textureLoader.load("./textures/door/ambientOcclusion.jpg")
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({
    color: "#ffff00",
    map: doorColorTexture, // 门贴图
    alphaMap: doorAplhaTexture, // 透明贴图
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAoTexture, // 环境遮挡贴图
})
const cube = new THREE.Mesh(cubeGeometry, basicMaterial)
scene.add(cube)
// 给cube添加第二组uv（用来加上环境遮挡贴图）
cubeGeometry.setAttribute("uv2", new THREE.BufferAttribute(cubeGeometry.attributes.uv.array, 2))

// 添加平面
const planeGeometry = new THREE.PlaneGeometry(1, 1)
const plane = new THREE.Mesh(planeGeometry, basicMaterial)
plane.position.set(3, 0, 0)
scene.add(plane)

// 给平面设置第二组uv
planeGeometry.setAttribute("uv2", new THREE.BufferAttribute(planeGeometry.attributes.uv.array, 2))

我们可以看到，加上环境遮挡贴图的门有一定的阴影效果

PBR物理渲染

什么是PBR?

基于物理渲染
以前的渲染方式，是在模仿灯光的外观，而PBR是在模仿光的实际行为让图形看起来更加真实

PBR组成部分

灯光属性

直接照明
间接照明
直接高光
间接高光
阴影
环境光闭塞

表面属性

基础色
法线
高光
粗糙度
金属度

灯光属性

光线类型

入射光

直接照明:直接从光源发射阴影物体表面的光
间接照明:环境光和直接光经过过多次反射后的光

反射光

镜面反射:在经过表面反射聚焦在同一方向上进入人眼的高亮光,生成的光电就是镜面光
漫反射:在经过表面反射后均匀散射到各个方向上的光

光与表面互相作用类型

直接漫反射:光线直接照射到表面上,然后均匀散射到各个方向上的光(1、直接来自光源的光2、撞击到物体表面后，均匀散射到各个方向上的光3、在着色器中使用简单的数学计算)
直接高光:光线直接照射到表面上,然后聚焦在同一方向上进入人眼的高亮光(1、直接来自光源的光2、反射在更集中的方向上3、在着色器中使用简单的数学计算，直接镜面反射的计算成本比漫反射低很多)
间接漫反射:光线经过多次反射后,均匀散射到各个方向上的光(1、来自环境中各个方向的光2、撞击表面后散落在各个方向3、因为计算昂贵，所以引擎的全局照明解决方案通常会离线渲染，并被烘培成灯光地图)
间接高光:光线经过多次反射后,聚焦在同一方向上进入人眼的高亮光（1、来自环境中各个方向的光2、反射在一个更集中的方向上、引擎中使用反射探头，平面反射，SSR，或射线追踪计算）

表面属性

基础色

定义表面的漫反射颜色
真实世界的材料不会比20暗或者比240 sRGB亮
粗糙表面具有更高的sRGB值，光线会更加散射，因此看起来更暗，最低为50s RGB
超出范围的值不能正确发光，所以保持在范围内是至关重要的
基础色题图制作注意点
不包括任何照明或阴影
基本颜色纹理看起来应该比较平坦
使用真实世界的度量来获取最佳结果的数据

法线

定义曲面的形状每个像素代表一个矢量
法线贴图会使表面显得凹凸不平
用于添加表面形状的细节
因为它们代表矢量数据，所以法线贴图是无法手工绘制的

镜面

用于直接和间接镜面照明的叠加
当直视表面时，定义反射率
非金属表面反射约4%的光
0.5代表4%的反射，1是代表8%的反射，但是对于大多数物体太高了
在掠射角下，所有表面都是100%反射的，内置于引擎中的菲涅耳项

粗糙度

表面在微观尺度上的粗糙度
白色是粗糙的
黑色是光滑的
控制反射的”焦点”
平滑=强烈的反射
粗糙=模糊的漫反射

金属度

两个不同的着色器通过金属度混合他们
基本色变成高光色而不是漫反射颜色
金属漫反射是黑色的
在底色下，镜面范围可达100%
大多数金属的反光性在60%-100%
确保对金属颜色值使用真实世界的测量值，并保证它们明亮
当金属为1时，镜面输入将被忽略

通过上面对PBR的了解，接下来让我们的门效果更加的逼真

标准网格材质与光照物理效果

将基础材质材质替换成标准网格材质

const textureLoader = new THREE.TextureLoader()
const doorColorTexture = textureLoader.load("./textures/door/color.jpg")
const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg")
const doorAoTexture = textureLoader.load("./textures/door/ambientOcclusion.jpg")

const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质
const material = new THREE.MeshStandardMaterial({
    color: "#ffff00",
    map: doorColorTexture,
    alphaMap: doorAplhaTexture,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAoTexture

})
const cube = new THREE.Mesh(cubeGeometry, material)
scene.add(cube)
// 给cube添加第二组uv
cubeGeometry.setAttribute("uv2", new THREE.BufferAttribute(cubeGeometry.attributes.uv.array, 2))

// 添加平面
const planeGeometry = new THREE.PlaneGeometry(1, 1)
const plane = new THREE.Mesh(planeGeometry, material)
plane.position.set(3, 0, 0)
scene.add(plane)

// 给平面设置第二组uv
planeGeometry.setAttribute("uv2", new THREE.BufferAttribute(planeGeometry.attributes.uv.array, 2))

这时候我们可以看到我们的物体是黑的，这是因为我们没有添加光

添加环境光

1
2
3

// 第一个参数是颜色，第二个是强度
const light = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(light)

添加直线光

// 直线光
// 第一个参数是颜色，第二个是强度
const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
// 设置光源的位置
directionalLight.position.set(10, 10, 10)
scene.add(directionalLight)

因为我们的光源在10，10，10这个三维坐标系中，所以我们的物体正面是可以看到效果，背面因为没有光，就导致看不到效果

置换贴图与顶点细分设置

目前，我们的门是以个平面，没有那种凹凸的感觉

接下来，我们要用置换贴图和顶点细分来实现让这个门有凹凸的感觉
首先，我们需要这样的一张贴图，颜色越白，突出越多

// 导入置换贴图
const doorHeightTexture = textureLoader.load("./textures/door/height.jpg")
const material = new THREE.MeshStandardMaterial({
    color: "#ffff00",
    map: doorColorTexture,
    alphaMap: doorAplhaTexture,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAoTexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture,
})

我们发现，没有效果，这是因为我们的平面没有顶点，我们需要给平面添加顶点

1 2	//200,200就是顶点 const planeGeometry = new THREE.PlaneGeometry(1, 1, 200, 200)

这时候我们发现就非常的突起，凹凸感实在太强了，我们需要调整一下，需要在材质那边设置下突起的高度

const material = new THREE.MeshStandardMaterial({
    color: "#ffff00",
    map: doorColorTexture,
    alphaMap: doorAplhaTexture,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAoTexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture, // 置换贴图
    displacementScale: 0.1, // 突起的高度
})

设置粗糙度和粗糙度贴图

当我们设置了直线光，并把粗糙度设置为0时，我们的平面就会非常的光滑

const material = new THREE.MeshStandardMaterial({
    color: "#ffff00",
    map: doorColorTexture,
    alphaMap: doorAplhaTexture,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAoTexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture,
    displacementScale: 0.1,
    roughness: 0, // 粗糙度
})

当然我们也可以不整体设置，使用粗糙度贴图来设置不同部位的粗糙度

// 导入粗糙度贴图
const roughnessTexture = textureLoader.load("./textures/door/roughness.jpg")

// 材质
const material = new THREE.MeshStandardMaterial({
    color: "#ffff00",
    map: doorColorTexture,
    alphaMap: doorAplhaTexture,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAoTexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture,
    displacementScale: 0.1,
    roughness: 1,
    roughnessMap: roughnessTexture // 粗糙度贴图

})

设置金属度和金属度贴图

将金属度设置为1时，就非常的像一个金属一样

const material = new THREE.MeshStandardMaterial({
    color: "#ffff00",
    map: doorColorTexture,
    alphaMap: doorAplhaTexture,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAoTexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture,
    displacementScale: 0.1,
    roughness: 1,
    roughnessMap: roughnessTexture, // 粗糙度贴图
    metalness:1, // 金属度
})

当然，我们也可以根据不同的部位来设置不同的金属度，这时候就需要金属贴图

// 导入金属贴图
const metalnessTexture = textureLoader.load("./textures/door/metalness.jpg")
const material = new THREE.MeshStandardMaterial({
    color: "#ffff00",
    map: doorColorTexture,
    alphaMap: doorAplhaTexture,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAoTexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture,
    displacementScale: 0.1,
    roughness: 1,
    roughnessMap: roughnessTexture,
    metalness: 1,
    metalnessMap: metalnessTexture, // 金属贴图
})

可以很明显看到金属和木门反射的区别

法线贴图

如果我们想要不同的部位反光的时候有区别，这时候就需要用到法线贴图

// 导入法线贴图
const normalTexture = textureLoader.load("./textures/door/normal.jpg")
const material = new THREE.MeshStandardMaterial({
    color: "#ffff00",
    map: doorColorTexture,
    alphaMap: doorAplhaTexture,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAoTexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture,
    displacementScale: 0.1,
    roughness: 0,
    roughnessMap: roughnessTexture,
    metalness: 1,
    metalnessMap: metalnessTexture,
    normalMap: normalTexture, // 法线贴图
})

如何获取各种类型纹理贴图

常用网站https://www.poliigon.com/
Bridge软件https://quixel.com/

纹理加载进度情况

我们仅仅这一个物体就是用了那么多的纹理贴图，那么如果我们需要一个更多的物体，必然会需要比较长的加载时间，因此我们需要纹理加载进度情况

// 单张纹理图的加载
const event={

}
event.onLoad=()=> {
    console.log("图片加载完成")
}
event.onProgress=(e)=> {
    console.log("图片加载进度",e.loaded/e.total)
}
event.onError=(e)=> {
    console.log("图片加载失败",e)
}
const doorColorTexture = textureLoader.load("./textures/door/color.jpg",event.onLoad,event.onProgress,event.onError)

如果是多张图片记录的话就需要使用的加载管理器了

// 单张纹理图的加载
const event={

}
let event = {};
// 单张纹理图的加载
event.onLoad = function () {
  console.log("图片加载完成");
};
event.onProgress = function (url, num, total) {
  console.log("图片加载完成:", url);
  console.log("图片加载进度:", num);
  console.log("图片总数:", total);
  let value = ((num / total) * 100).toFixed(2) + "%";
  console.log("加载进度的百分比：", value);
  div.innerHTML = value;
};
event.onError = function (e) {
  console.log("图片加载出现错误");
  console.log(e);
};
// 设置加载管理器
const loadingManager = new THREE.LoadingManager(
  event.onLoad,
  event.onProgress,
  event.onError
);
// 导入纹理
const textureLoader = new THREE.TextureLoader(loadingManager);

环境贴图

接下来要实现下面这样的效果，将图片贴上去，然后小球映射环境

第一种，使用一张完整的贴图,使用RGBELoader加载HDR格式（高亮度明显曝光）的图片

由于hdr图片放不上博客，我就截图了一下

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
// 目标：设置环境纹理
// 加载hdr环境图
const rgbeLoader = new RGBELoader();
rgbeLoader.loadAsync("textures/hdr/002.hdr").then((texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture;
  scene.environment = texture;
});

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);



// 创建小球
const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20);
const material = new THREE.MeshStandardMaterial({
  metalness: 0.7,
  roughness: 0.1,
});
const sphere = new THREE.Mesh(sphereGeometry, material);
scene.add(sphere);


// 灯光
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(light);
//直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

第二种，使用六张图片拼接成一张图片，使用CubeTextureLoader加载,分别对应了正负方向的xyz轴

使用到的6张图片（p代表正方向，n代表负方向）

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 设置cube纹理加载器
const cubeTextureLoader = new THREE.CubeTextureLoader();
const envMapTexture = cubeTextureLoader.load([
  "textures/environmentMaps/1/px.jpg",
  "textures/environmentMaps/1/nx.jpg",
  "textures/environmentMaps/1/py.jpg",
  "textures/environmentMaps/1/ny.jpg",
  "textures/environmentMaps/1/pz.jpg",
  "textures/environmentMaps/1/nz.jpg",
]);

const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20);
const material = new THREE.MeshStandardMaterial({
  metalness: 0.7,
  roughness: 0.1,
  //   envMap: envMapTexture,
});
const sphere = new THREE.Mesh(sphereGeometry, material);
scene.add(sphere);

// 给场景添加背景
scene.background = envMapTexture;
// 给场景所有的物体添加默认的环境贴图
scene.environment = envMapTexture;

// 灯光
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(light);
//直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

清除物体_几何体_材质_纹理保证性能和内存不泄漏

在调用render的时候,清除

// 清除场景中的物体
scene.remove(sphere);
// 清除几何体
sphereGeometry.dispose();
// 清除材质
sphereMaterial.dispose();
// 清除纹理
sphereTexture.dispose();

```

blog-of-codesigner(顾炯洋)

recorded growth

初识材质与纹理

材质的属性

偏移

旋转

重复

设置纹理显示算法与mipmap

透明材质与透明纹理

环境遮挡贴图

PBR物理渲染

什么是PBR?

PBR组成部分

灯光属性

表面属性

灯光属性

入射光

反射光

表面属性

基础色题图制作注意点

标准网格材质与光照物理效果

置换贴图与顶点细分设置

设置粗糙度和粗糙度贴图

设置金属度和金属度贴图

法线贴图

如何获取各种类型纹理贴图

纹理加载进度情况

环境贴图

第一种，使用一张完整的贴图,使用RGBELoader加载HDR格式（高亮度明显曝光）的图片

第二种，使用六张图片拼接成一张图片，使用CubeTextureLoader加载,分别对应了正负方向的xyz轴

清除物体_几何体_材质_纹理保证性能和内存不泄漏

请博主喝杯咖啡