一、前言

这篇文章，我们主要来了解一下 ThreeJs 中纹理相关的知识。渲染一个 3D 物体时，网格 Mesh 决定了这个物体的形状态，如一个球，一辆车，一个人等。而纹理决定了这个物体的表面具体长什么样子。一个球包上一层篮球的花纹就是篮球了，而如果包上的是一层足球的花纹那可能就是足球了。

二、概述

ThreeJs 中为定义了多种多样的纹理，其类图如下。

Texture.jpg

纹理的基类是 Texture，一般我们都使用这个类，通过给其属性 Image 传入一个图片从而构造出一个纹理。纹理是材质的属性，材质和几何体 Gemotry 构成 Mesh ，然后被添加到 Scene 中进行渲染。纹理决定了物体的表面该是什么样子，而材质则决定了物体具备什么样的“气质”。后面还会再专门学习材质，下面再详细地看一看各个纹理的作用及其使用场景。

三、认识纹理

1、Texture

TextureXmind.jpg

纹理的属性何其多，但在一般情况下，并不要需要一一来设置，而是取默认值即可。并且，我们一般都会通过 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.jpg

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)

image.png

图中红圈里的内容就是通过 CanvasTexture 来实现的。

3、CompressedTexture

CompressedTexture.jpg

4、CubeTexture

CubeTexture.jpg

一般都是在环境贴图中，其效果就是模型的材质会呈现世界中图像的镜像，就像是镜子一样。

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 } );

类似效果如下。

image.png

5、DataTexture

DataTexture.jpg

// 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

image.png

6、DataTexture3D

DataTexture3D.jpg

相对 DataTexture 多有一个深度维度。

var texture = new THREE.DataTexture3D( array, 256, 256, 109 );

texture.format = THREE.RedFormat;
texture.type = THREE.UnsignedByteType;

image.png

7、DepthTexture

DepthTexture.jpg

depthTexture = new THREE.DepthTexture();
depthTexture.type = THREE.UnsignedShortType;

image.png

对于深度纹理贴图，这里首先要弄明白什么是深度图。深度图像包含了普通的RGB三通道彩色图像和Depth Map。而通俗的讲，深度就是每个像素距离当时相机所在位置的距离。

image.png

上面就是一个深度图的展示，通过颜色的明暗程度，我们可以看出图片中所呈现的物体的远近关系的。

我们进一步来看，对于深度图的实际应用，应该能更进一步帮助我们理解。首先看一小段 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

VideoTexture.jpg

常规的用法

<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 );

视频作为纹理的一个效果

image.png

四、总结

文章走马观花式的把 ThreeJs 所支持的几种纹理都过了一遍，大概看了每个纹理的用法以及效果。

而实际项目中，作者目前用到的只是 Texture(一般纹理贴图)、CanvasTexture（用于文字绘制）、CubeTexutre（用于环境贴图），其他几个相对比较高级，目前还没有实际去用到。