探索三维世界【2】：Three.js 的 Texture 纹理

1、Texture纹理

Texture 是 three.js 中的“纹理”概念。纹理是指将一张图像映射到 three.js 场景中的物体表面上的过程。通过 Texture，可以在 three.js 场景中应用各种图像效果，并让物体的表面看起来更真实。

Texture 主要有以下子类：

• DataTexture：可以存储任意格式的数据。这对于高度自定义的定制场景非常有用。
• CompressedTexture：可以压缩图像以减少显存占用。这对于需要使用大量图片的场景非常有用。
• CubeTexture：可以在物体表面上实现立体效果，让场景更加真实。
• VideoTexture：可以将视频应用于场景中的物体表面上。
• Texture 类的属性和方法，可以在 three.js 中实现各种纹理效果。例如，可以使用 Texture.repeat 和 Texture.wrapS 等属性来控制纹理的重复和环绕方式，使用 Texture.offset 来控制纹理的偏移量，使用 Texture.minFilter 和 Texture.magFilter 来控制纹理的缩放方式等等。

2、TextureLoader 纹理加载器

那么好，上面说明了Texture纹理，那么TextureLoader 纹理加载器就顾名思义是指加载纹理的对象咯。

TextureLoader 是 three.js 内置的一个类，用于加载纹理文件并创建 Texture 对象。你可以使用 TextureLoader 加载网页中的图像，然后在场景中创建一个新的纹理对象，并将其应用到任何需要的物体表面上。在加载过程中，实际上是使用 Texture 和其子类来创建不同类型的纹理对象。例如，TextureLoader 可以加载普通的图片来创建基本的 Texture 对象，或者加载 .dds 文件来创建压缩的 CompressedTexture 对象。

因此，TextureLoader 和 Texture 以及其子类之间是一种解耦的关系，TextureLoader 负责纹理的加载和创建工作，而 Texture 及其子类则负责实现具体的纹理效果和属性。

2.1、创建纹理加载器

在进行创建纹理加载器时，直接通过THREE父类进行创建，之后通过load方法进行加载图片到对应的纹理对象上。并且这里我们也并不关心图片何时加载上去，以及加载成功或失败的问题，后面三个回调函数就不必通过函数进行传递

.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : Texture

• url — 文件的URL或者路径，也可以为 Data URI.
• onLoad — 加载完成时将调用。回调参数为将要加载的texture.
• onProgress — 将在加载过程中进行调用。参数为XMLHttpRequest实例，实例包含total和loaded字节。
• onError — 在加载错误时被调用。

import TREE from './assets/img/tree.png'
import SHIP from './assets/img/ship.png'

const textureLoader = new THREE.TextureLoader()
const treeloader = textureLoader.load(TREE)
const shiploader = textureLoader.load(SHIP)

2.2、纹理属性设置

• .offset : 贴图单次重复中的起始偏移量，分别表示U和V。 一般范围是由0.0到1.0
• .center : 旋转中心点。(0.5, 0.5)对应纹理的正中心。默认值为(0,0)，即左下角。
• .rotation : 纹理将围绕中心点旋转多少度，单位为弧度（rad）。正值为逆时针方向旋转，默认值为0。
• .repeat：决定纹理在表面的重复次数，两个方向分别表示U和V，如果重复次数在任何方向上设置了超过1的数值， 对应的Wrap需要设置为THREE.RepeatWrapping或者THREE.MirroredRepeatWrapping来 达到想要的平铺效果。
• .wrapS : 这个值定义了纹理贴图在水平方向上将如何包裹，在UV映射中对应于U。默认值是THREE.ClampToEdgeWrapping，即纹理边缘将被推到外部边缘的纹素。 其它的两个选项分别是THREE.RepeatWrapping和THREE.MirroredRepeatWrapping。
  • 使用RepeatWrapping，纹理将简单地重复到无穷大。
  • 使用MirroredRepeatWrapping， 纹理将重复到无穷大，在每次重复时将进行镜像。
• .wrapT : 这个值定义了纹理贴图在垂直方向上将如何包裹，在UV映射中对应于V。同上wrapS

// 偏移
// treeloader.offset.x = 0.5
// treeloader.offset.y = 0.5
treeloader.offset.set(0.5, 0.5)
// 设置中心点和旋转角度
treeloader.center.set(0.5, 0.5)
// treeloader.rotation = Math.PI / 4
// 设置重复展示 需要设置包裹模式wrapS、wrapT
treeloader.wrapS = THREE.RepeatWrapping
treeloader.wrapT = THREE.RepeatWrapping
treeloader.repeat.set(2, 4)


// shiploader.offset.set(0.5, 0.5)
shiploader.center.set(0.5, 0.5)
// shiploader.wrapS = THREE.RepeatWrapping
// shiploader.wrapT = THREE.RepeatWrapping
// shiploader.repeat.set(2, 4)
// 纹理显示    低像素展示
shiploader.minFilter = THREE.NearestFilter
shiploader.magFilter = THREE.NearestFilter

2.3、设置纹理渲染

在前面一章当中（探索三维世界：从Hello World开始的Three.js入门之旅）已经简单说明了如何创建一个简单的立体物体与材质，我们只需要给MeshBasicMaterial或者其他的材质设置上纹理也就完成了纹理贴图。

先看上一篇设置的MeshBasicMaterial基础网格材质，只给其设置了颜色

const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

这里我们可以通过alphaMap与map进行设置纹理

• .alphaMap : Texture纹理类型 alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。
• .map : Texture纹理类型 颜色贴图。
• .transparent : 定义此材质是否透明。

const material = new THREE.MeshBasicMaterial({
    color: 'yellow',
    map: treeloader,
    alphaMap: treeloader,
    // transparent: true,
    // 渲染两面（外面、里面）
    side: THREE.DoubleSide
    // opacity: 0.5
});

2.4、打光

添加平行光

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(-10, 10, 10)
scene.add(directionalLight);

3、完整代码与展示

import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js'
import TREE from './assets/img/tree.png'
import SHIP from './assets/img/ship.png'
// 场景
const scene = new THREE.Scene();
// 相机 （透视相机）  角度、宽高比、近端面、远端面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);

// 使用纹理
const textureLoader = new THREE.TextureLoader()
const treeloader = textureLoader.load(TREE)
const shiploader = textureLoader.load(SHIP)

// 纹理属性
// 偏移
// treeloader.offset.x = 0.5
// treeloader.offset.y = 0.5
treeloader.offset.set(0.5, 0.5)
// 设置中心点和旋转角度
treeloader.center.set(0.5, 0.5)
// treeloader.rotation = Math.PI / 4
// 设置重复展示 需要设置包裹模式wrapS、wrapT
treeloader.wrapS = THREE.RepeatWrapping
treeloader.wrapT = THREE.RepeatWrapping
treeloader.repeat.set(2, 4)


// shiploader.offset.set(0.5, 0.5)
shiploader.center.set(0.5, 0.5)
shiploader.wrapS = THREE.RepeatWrapping
shiploader.wrapT = THREE.RepeatWrapping
// shiploader.repeat.set(2, 4)
// 纹理显示    低像素展示
shiploader.minFilter = THREE.NearestFilter
shiploader.magFilter = THREE.NearestFilter

// 几何体与材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
    color: 'yellow',
    map: treeloader,
    alphaMap: treeloader,
    // transparent: true,
    // 渲染两面（外面、里面）
    side: THREE.DoubleSide
    // opacity: 0.5
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const planeGeometry = new THREE.PlaneGeometry(1, 1)
const plane = new THREE.Mesh(
    new THREE.PlaneGeometry(1, 1),
    material
)
plane.position.set(1, 0, 0)
// 第二套UV 环境渲染
planeGeometry.setAttribute(
    "uv2",
    new THREE.BufferAttribute(planeGeometry.attributes.uv.array, 2)
)
scene.add(plane)

// 标准网格材质
const mgeometry = new THREE.BoxGeometry(1, 1, 1);
const meshStandardMaterial = new THREE.MeshStandardMaterial({
    color: 0x00ff00,
    map: shiploader,
    alphaMap: shiploader,
    // 渲染两面（外面、里面）
    side: THREE.DoubleSide
});
const mCube = new THREE.Mesh(mgeometry, meshStandardMaterial);
mCube.position.set(4, 0, 0)
scene.add(mCube);

// 加上灯光 环境光不能用来投射阴影，因为它没有方向。 入参 颜色的rgb数值  光照的强度
// const light = new THREE.AmbientLight('red', 0.5);
// scene.add(light);
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 10, 10)
scene.add(directionalLight);

// 坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 渲染
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 新增轨迹控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 使用渲染器   通过相机将场景渲染
function render(time) {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

render()