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