一、前言
这篇文章，我们主要来了解一下 ThreeJs 中纹理相关的知识。渲染一个 3D 物体时，网格 Mesh 决定了这个物体的形状态，如一个球，一辆车，一个人等。而纹理决定了这个物体的表面具体长什么样子。一个球包上一层篮球的花纹就是篮球了，而如果包上的是一层足球的花纹那可能就是足球了。
二、概述
ThreeJs 中为定义了多种多样的纹理，其类图如下。
纹理的基类是 Texture，一般我们都使用这个类，通过给其属性 Image 传入一个图片从而构造出一个纹理。纹理是材质的属性，材质和几何体 Gemotry 构成 Mesh ，然后被添加到 Scene 中进行渲染。纹理决定了物体的表面该是什么样子，而材质则决定了物体具备什么样的“气质”。后面还会再专门学习材质，下面再详细地看一看各个纹理的作用及其使用场景。
三、认识纹理
1、Texture
纹理的属性何其多，但在一般情况下，并不要需要一一来设置，而是取默认值即可。并且，我们一般都会通过 TextureLoader 来为我们构造一个纹理，而不是直接构造。例子如下。
var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );
一般情况下，我们这么简单的设置下就可以了。但实际应用中，我们可能会碰到需要指定自己的纹理坐标的情况。那这个时候，我们就需要自己计算好纹理坐标，然后给 geometry 添加属性 "uv"，从而应用我们自己的纹理坐标。
geom.addAttribute('uv', new THREE.BufferAttribute(uvArr, 2))
2、CanvasTexture
CanvasTexture 主要是用于将 Dom 元素 <canvas> 中绘制的内容，以纹理的方式贴到模型上。在 canvas 中我们可以绘制任何我们想要绘制的图形或者文字。以下代码就是在 Canvas 中绘制文本，从而创建一个 CanvasTexture。
let m = 4;
let textDiv = document.createElement('canvas');
let context2D = textDiv.getContext('2d');
context2D.font = ' ' + font.fontSize + 'px ' + font.fontFamily;
context2D.fontWeight = font.fontWeight;
context2D.fillStyle = font.fontColor;
let s = context2D.measureText(text).width,height = y(1.4 * font.fontSize + 2 * m),u = height - m, c = u / 2, width = y(s + c + 2 * m);
textDiv.width = width;
textDiv.height = height;
context2D.font = ' ' + font.fontSize + 'px ' + font.fontFamily;
context2D.fontWeight = font.fontWeight;
context2D.fillStyle = font.fontColor;
context2D.fillText(text,textDiv.width / 2 - s / 2,textDiv.height / 2 + 0.3 * font.fontSize);
let texture = new THREE.CanvasTexture(textDiv)
图中红圈里的内容就是通过 CanvasTexture 来实现的。
3、CompressedTexture
4、CubeTexture
一般都是在环境贴图中，其效果就是模型的材质会呈现世界中图像的镜像，就像是镜子一样。
var loader = new THREE.CubeTextureLoader();
loader.setPath( 'textures/cube/pisa/' );
var textureCube = loader.load( [
'px.png', 'nx.png',
'py.png', 'ny.png',
'pz.png', 'nz.png'
] );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
类似效果如下。
5、DataTexture
// create a buffer with color data
var size = width * height;
var data = new Uint8Array( 3 * size );
var r = Math.floor( color.r * 255 );
var g = Math.floor( color.g * 255 );
var b = Math.floor( color.b * 255 );
for ( var i = 0; i < size; i ++ ) {
var stride = i * 3;
data[ stride ] = r;
data[ stride + 1 ] = g;
data[ stride + 2 ] = b;
}
// used the buffer to create a DataTexture
var texture = new THREE.DataTexture( data, width, height, THREE.RGBFormat );
texture.needsUpdate = true
6、DataTexture3D
相对 DataTexture 多有一个深度维度。
var texture = new THREE.DataTexture3D( array, 256, 256, 109 );
texture.format = THREE.RedFormat;
texture.type = THREE.UnsignedByteType;
7、DepthTexture
depthTexture = new THREE.DepthTexture();
depthTexture.type = THREE.UnsignedShortType;
对于深度纹理贴图，这里首先要弄明白什么是深度图。深度图像包含了普通的RGB三通道彩色图像和Depth Map。而通俗的讲，深度就是每个像素距离当时相机所在位置的距离。
上面就是一个深度图的展示，通过颜色的明暗程度，我们可以看出图片中所呈现的物体的远近关系的。
我们进一步来看，对于深度图的实际应用，应该能更进一步帮助我们理解。首先看一小段 frag_shader 的代码。主要关注其中的 tDepth 的应用。这是一个纹理采样器。
<script id="post-frag" type="x-shader/x-fragment">
#include <packing>
varying vec2 vUv;
uniform sampler2D tDiffuse;
// 定义一个用于深度图片的纹理采样器
uniform sampler2D tDepth;
uniform float cameraNear;
uniform float cameraFar;
// 读取深度信息
float readDepth( sampler2D depthSampler, vec2 coord ) {
float fragCoordZ = texture2D( depthSampler, coord ).x;
float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
}
void main() {
//vec3 diffuse = texture2D( tDiffuse, vUv ).rgb;
float depth = readDepth( tDepth, vUv );
// 应用深度信息
gl_FragColor.rgb = 1.0 - vec3( depth );
gl_FragColor.a = 1.0;
}
</script>
这里的关键的 2 步就是首先从纹理中读取深度值，然后进行相应的应用，也就是颜色上的计算，并全部赋值给 gl_FragColor.rgb。具体怎么计算就需要根据对应的需求来定了。
8、VideoTexture
常规的用法
<video id="video" autoplay loop crossOrigin="anonymous" webkit-playsinline style="display:none">
<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
video = document.getElementById( 'video' );
texture = new THREE.VideoTexture( video );
视频作为纹理的一个效果
四、总结
文章走马观花式的把 ThreeJs 所支持的几种纹理都过了一遍，大概看了每个纹理的用法以及效果。
而实际项目中，作者目前用到的只是 Texture(一般纹理贴图)、CanvasTexture（用于文字绘制）、CubeTexutre（用于环境贴图），其他几个相对比较高级，目前还没有实际去用到。
