Threejs入门之十六：纹理贴图和纹理材质

Texture 用于创建一个纹理贴图，将其应用到一个物体的表面，纹理对象可以通过TextureLoader(纹理加载器)的load()方法来加载一个图片。要使用纹理贴图，首先要创建一个纹理加载器，纹理加载器返回一个Texture 纹理对象，通过纹理加载器加载贴图材质
然后通过设置材质的颜色贴图map属性的值为上面的Texture来调用，下面我们创建一个立方体，并给这个立方体贴上木头材质的贴图，使其变为一个木箱

import * as THREE from 'three'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
// 场景
const scene = new THREE.Scene() 
// 几何体
const geometry = new THREE.BoxGeometry(200,200,200) 
// 纹理贴图加载器
const textureLoader = new THREE.TextureLoader()
// 使用TextureLoader的.load()方法加载图像，返回一个texture纹理对象
const texture = textureLoader.load('./images/muban.jpg') 
// 材质
const material = new THREE.MeshLambertMaterial({ 
  map:texture 
})
const mesh = new THREE.Mesh(geometry,material)
scene.add(mesh)
// 灯光
const light = new THREE.AmbientLight(0xffffff,1)
scene.add(light)
// 创建点光 
const pointLight = new THREE.PointLight(0xffffff,1)
// 点光源的位置 
pointLight.position.set(100,100,100)
scene.add(pointLight)
// 相机
const camera = new THREE.PerspectiveCamera(75,600 / 400 ,1,600)
camera.position.set(200,200,200)
camera.lookAt(mesh.position) 
// 渲染器
const renderer = new THREE.WebGLRenderer() 
renderer.setSize(600,400) 
document.querySelector('#webgl').appendChild(renderer.domElement) 
const controls = new OrbitControls(camera,renderer.domElement)
function animation() {
  requestAnimationFrame(animation)
  renderer.render(scene,camera)
}
animation()

刷新浏览器看效果

这里需要注意，如果在材质中使用了map属性进行纹理贴图，同时又使用了color属性，则最终的显示结果是两者共同作用的结果，如把上面的材质添加颜色

const material = new THREE.MeshLambertMaterial({
  color:0x00ffff,
  map:texture
})

刷新浏览器，看到的颜色是两者共同作用的结果

圆形贴图
如果想实现圆形贴图，我们只需要把几何体设置为CircleGeometry并设置参数即可

const geometry = new THREE.CircleGeometry(60, 100);

球形贴图

const geometry = new THREE.SphereGeometry(100, 32,16);

顶点UV坐标
顶点UV坐标是一个取值范围在0~1之间的二维顶点坐标；顶点UV坐标的作用是从纹理贴图上提取像素，并映射到网格模型Mesh的几何体表面上；顶点UV坐标geometry.attributes.uv和顶点位置坐标geometry.attributes.position是一一对应的。
顶点UV坐标的（0,0）点对应贴图的左下角，（1,1）点对应贴图的右上角，（1,0）点对应贴图的右下角，（1,1）点对应贴图的左上角

通过设置类型数组来定义顶点UV坐标

const uv = new Float32Array([
  0, 0, //图片左下角
  1, 0, //图片右下角
  1, 1, //图片右上角
  0, 1, //图片左上角
])

将上面定义的uv数组作为参数传递给BufferAttribute，并指定几个数据为一组，通常是2个数据为一组，表示一个纹理的顶点坐标，来设置BufferAttribute；
通过设置geometry.attributes.uv的值为上面的BufferAttribute，来设置几何体的UV贴图

geometry.attributes.uv = new THREE.BufferAttribute(uvs, 2); //2个为一组,表示一个顶点的纹理坐标

如果我们不想将整个图片都贴到物体上，我们只需要左下角的四分之一贴到物体上，我们可以设置顶点UV坐标为0.5来获取四分之一贴图，

const uvs = new Float32Array([
  0, 0, //图片左下角
  0.5, 0, //图片右下角
  0.5, 0.5, //图片右上角
  0, 0.5, //图片左上角
])

Texture纹理的阵列
Texture纹理有两个属性定义了其在水平和垂直方向上贴图如何显示，
.wrapS : 这个值定义了纹理贴图在水平方向上将如何包裹，在UV映射中对应于U。
默认值是THREE.ClampToEdgeWrapping，即纹理边缘将被推到外部边缘的纹素。
wrapT : 这个值定义了纹理贴图在垂直方向上将如何包裹，在UV映射中对应于V。可以使用与 .wrapS : number相同的选项。
包裹模式

THREE.RepeatWrapping
THREE.ClampToEdgeWrapping
THREE.MirroredRepeatWrapping

RepeatWrapping，纹理将简单地重复到无穷大
ClampToEdgeWrapping是默认值，纹理中的最后一个像素将延伸到网格的边缘。
MirroredRepeatWrapping， 纹理将重复到无穷大，在每次重复时将进行镜像
如设置一个平面平铺上面的木头材质，可以设置贴图的wrapS 和wrapT 为RepeatWrapping，
通过设置texture.repeat.set()来设置UV两个方向纹理的重复数量

// 设置阵列模式
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping
// uv两个方向纹理重复数量
texture.repeat.set(5,5)

关于纹理贴图和纹理材质就先到这里吧，如果你觉得有用记得点赞关注哦