threejs 纹理流动_ThreeJs 认识纹理

一、前言

这篇文章，我们主要来了解一下 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