ThreeJs 認識紋理

1、前言

這篇文章，咱們主要來了解一下 ThreeJs 中紋理相關的知識。渲染一個 3D 物體時，網格 Mesh 決定了這個物體的形狀態，如一個球，一輛車，一我的等。而紋理決定了這個物體的表面具體長什麼樣子。一個球包上一層籃球的花紋就是籃球了，而若是包上的是一層足球的花紋那可能就是足球了。

2、概述

ThreeJs 中爲定義了多種多樣的紋理，其類圖以下。

紋理的基類是 Texture，通常咱們都使用這個類，經過給其屬性 Image 傳入一個圖片從而構造出一個紋理。紋理是材質的屬性，材質和幾何體 Gemotry 構成 Mesh ，而後被添加到 Scene 中進行渲染。紋理決定了物體的表面該是什麼樣子，而材質則決定了物體具有什麼樣的「氣質」。後面還會再專門學習材質，下面再詳細地看一看各個紋理的做用及其使用場景。

3、認識紋理

一、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))

複製代碼

二、CanvasTexture

CanvasTexture 主要是用於將 Dom 元素 中繪製的內容，以紋理的方式貼到模型上。在 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 來實現的。

三、CompressedTexture

四、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 } );
複製代碼

相似效果以下。

五、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
複製代碼

六、DataTexture3D

相對 DataTexture 多有一個深度維度。

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

texture.format = THREE.RedFormat;
texture.type = THREE.UnsignedByteType;
複製代碼

七、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。具體怎麼計算就須要根據對應的需求來定了。

八、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 );
複製代碼

視頻做爲紋理的一個效果

4、總結

文章蜻蜓點水式的把 ThreeJs 所支持的幾種紋理都過了一遍，大概看了每一個紋理的用法以及效果。

而實際項目中，做者目前用到的只是 Texture(通常紋理貼圖)、CanvasTexture（用於文字繪製）、CubeTexutre（用於環境貼圖），其餘幾個相對比較高級，目前尚未實際去用到。