前言

threejs中的纹理贴图使用方法，参考《threejs开发指南》。

文章目录

前言
纹理的基本使用
纹理的常用属性
常用纹理的种类
- 1 普通贴图map
- 2 凹凸贴图bumpMap
- 3 法线贴图normalMap
- 4 位移贴图displacementMap
- 5 金属光泽度贴图metalnessMap，金属粗糙度贴图roughnessMap
- 6 Alpha贴图
- 7 自发光贴图
- 8 高光贴图emissiveMap
- 9 环境贴图cubeMap
- 10 GLSL 的texture2D() 方法

纹理的基本使用

// 外部引入纹理
import plaster from '../texture/plaster.jpg'···// 引入纹理到几何体
const textureLoader = new THREE.TextureLoader()
const plasterTexture =  textureLoader.load(plaster)
···// 引入外部纹理const cubeGeometry = new THREE.BoxGeometry(10, 10, 10);const meshMaterial = new THREE.MeshBasicMaterial({color:"#ffff00",map:plasterTexture});const cube = new THREE.Mesh(cubeGeometry, meshMaterial);

纹理的常用属性

       plasterTexture.offset.x = 0.5; // 设置纹理偏移量plasterTexture.center.set (0.5,0.5)// 旋转中心点,默认左下角(0,0)plasterTexture.rotation = Math.PI / 4 // 设置旋转plasterTexture.repeat.set(3,5) // 设置重复：水平三次，竖直方向五次// wrapS, wrapT 设置在水平、竖直方向的重复方式plasterTexture.wrapS = THREE.RepeatWrappingplasterTexture.wrapT = THREE.RepeatWrappingplasterTexture.magFilter // 当前模型显示大小大于纹理图片的大小时，显示的方式plasterTexture.minFilter // 当前模型显示大小小于纹理图片的大小时，显示的方式

常用纹理的种类

1 普通贴图map

   // 引入纹理const textureLoader = new THREE.TextureLoader()// 引入外部纹理const cubeGeometry = new THREE.const meshMaterial = new THREE.MeshBasicMaterial({color:"#ffff00",map:textureLoader.load(url)});

2 凹凸贴图bumpMap

凹凸贴图用于为材质添加厚度，通过像素的密集程度定义凹凸的高度

 const meshMaterial = new THREE.MeshBasicMaterial({color:"#ffff00",map:textureLoader.load(url),bumpMap = textureLoader.load(bumpUrl)});

增加凹凸贴图前（左）和增加凹凸贴图后（右）

3 法线贴图normalMap

法线贴图保存法线的法向量信息，可以构造出细节更加丰富的模型，如对光源做出更加自然的反应。

const meshMaterial = new THREE.MeshBasicMaterial({color:"#ffff00",map:textureLoader.load(url),normalMap: textureLoader.load(normalUrl)});

增加法向贴图前（左）和增加法向贴图后（右）

4 位移贴图displacementMap

位移贴图用于修改模型的顶点，与凹凸贴图和法向贴图只能造成一种凹凸不平的假象不同，位移贴图可以真正改变模型的形状。

const meshMaterial = new THREE.MeshBasicMaterial({color:"#ffff00",map:textureLoader.load(url),displacementMap = textureLoader.load(displacementUrl)});   meshMaterial.displacementScale = 1.0 // 控制顶点位移程度

添加位移贴图

5 金属光泽度贴图metalnessMap，金属粗糙度贴图roughnessMap

金属材质THREE.MeshStandardMaterial提供了metalness和roughness两个属性来设置金属表面的光滑度和粗糙度，提供设置光泽度贴图和糙度贴图，可以在光滑金属表面设置局部粗糙或者在粗糙金属表面设置局部光滑，此时metalness和roughness的实际值等于他们本身的值与贴图的乘积。

const cubeMaterial = new THREE.MeshStandardMaterial({envMap: scene.background,// envMap: alternativeMap,color: 0xffffff,metalness: 1, // 材质像金属的程度。 0接近于木质或石头，1接近于金属roughness: 0.5 // 粗糙度。 0.0表示镜面反射，1.0表示漫反射
});const cubeMaterialWithMetalMap = cubeMaterial.clone();
cubeMaterialWithMetalMap.metalnessMap = textureLoader.load(metalnessUrl)   const cubeMaterialWithRoughnessMap = cubeMaterial.clone();
cubeMaterialWithRoughnessMap.roughnessMap = textureLoader.load(roughnessUrl)

metalnessMap（左）和roughnessMap（右）

6 Alpha贴图

Alpha贴图用于控制物体的透明度，贴图中的黑色部分代表完全透明，白色部分带面完全不透明。

const sphere = new THREE.SphereGeometry(8, 180, 180)
const sphereMaterial = new THREE.MeshStandardMaterial({alphaMap: textureLoader.load(alphaUrl),metalness: 0.02,roughness: 0.07,color: 0xffffff,alphaTest: 0.5 // 避免出现小斑点问题
});

7 自发光贴图

自发光贴图可以给模型表面添加发光效果的纹理贴图，自发光贴图不受光源的影响，也不能影响周围的物体。在使用自发光贴图时，需要将emissive属性设置为非0

const sphere = new THREE.SphereGeometry(8, 180, 180)
const sphereMaterial = new THREE.MeshStandardMaterial({map: textureLoader.load(mapUrl),emissiveMap: textureLoader.load(emissiveUrl),
});

8 高光贴图emissiveMap

高光贴图可以给模型指定某一部分比较暗淡或者明亮，配合法向贴图效果更佳。

const sphere = new THREE.SphereGeometry(8, 180, 180)
const sphereMaterial = new THREE.MeshPhongMaterial({map: textureLoader.load(mapUrl),normalMap: textureLoader.load(normalUrl),specularMap: textureLoader.load(specularUrl)
});

9 环境贴图cubeMap

实际进行镜面反射是一个非常耗费性能的工作，可以使用环境贴图来起到类似于镜面反射的效果。将几何体所处的环境换做一个纹理赋给几何体。首先创建cubeMap对象，按照指定顺序加载贴图，并把该容器设置为场景的背景。

const urlMap = [  // 纹理集合，需要指定顺序rightUrl,leftUrl,topUrl,bottomUrl,frontUrl,BackUrl
];// 创建cubeMap对象
const cubeLoader = new THREE.CubeTextureLoader();
const cubeMap = cubeLoader.load(urlMap);// 环境贴图scene.background = cubeMap;const cubeMaterial = new THREE.MeshStandardMaterial({envMap: cubeMap,color: 0xffffff,metalness: 1,roughness: 0,
});const sphereMaterial = cubeMaterial.clone();// cubeMap.mapping = THREE.CubeRefractionMapping;  // 环境折射效果
// cubeMap.mapping = THREE.CubeReflectionMapping;  // 默认 环境反射效果

10 GLSL 的texture2D() 方法

GLSL ES内置函数texture2D()函数可以用来获取纹理要素的颜色，其使用方法如下：

 vec4 texture2D(sampler2D sampler, vec2 coord)参数：
- sampler: 纹理影像的单元编号
- coord:  纹理坐标
返回类型：vec4的颜色值，不一定是rgba

片元着色器代码

precision lowp float;varying vec2 v_uv;varying float f_height;uniform sampler2D uTexture;void main() {float height = (f_height + 0.05 );vec4 textureColor = texture2D(uTexture,v_uv); gl_FragColor = textureColor; }

js代码参考threejs-自定义着色器材质，更改的地方很少：

const textureLoader = new THREE.TextureLoader()const Texture =  textureLoader.load(texture)// 在RawShaderMaterial定义时加上 uTexture
uniforms: {uTime: { value: 0 },uTexture: { value: Texture }},

效果如下：

threejs-纹理贴图相关推荐

ThreeJS 纹理贴图创建一个我的世界草地方块
ThreeJS 纹理贴图创建一个我的世界草地方块开始准备使用ThreeJS写一个类似<我的世界>场景的射击类游戏,地形和我的世界很相似.场景中需要进行很多的纹理贴图,本篇文章主要以给一个 ...
关于ThreeJs纹理贴图动画的实现
效果图:实际效果,图中的贴图是可以动的一.准备工作 1.静态文件 2.首先你要引入相关依赖: threejs核心依赖: http://www.yanhuangxueyuan.com/versions ...
ThreeJS - 动态更换fbx模型的某个子Mesh现有的纹理贴图为指定的纹理贴图
1 动态更换fbx模型的指定纹理贴图在使用ThreeJS中的FBXLoader的过程中,我们在有的时候只需要Fbx模型的网格信息,而每个网格的纹理我们想自己动态的指定,这在OpenGL中很简单,在T ...
Threejs系列--14游戏开发--沙漠赛车游戏【纹理贴图之loading加载】
Threejs系列--14游戏开发--沙漠赛车游戏[纹理贴图之loading加载] 序言目录结构代码一览 world/index.js代码 Application.js代码代码解读运行结果序 ...
使用ThreeJs搭建BIM模型浏览器第六步纹理贴图（材质）
上效果图解决思路: Threejs上没啥好说的.看郭老师的博客:three.js纹理贴图_郭隆邦技术博客 Revit上如何导出呢,不好意思,这次真不能贴核心代码了.. 自研引擎产品试用,demo下载 ...
threejs摩尔纹镜头拉远模型贴图出现摩尔纹，纹理贴图闪烁异常解决办法
threejs镜头拉远模型贴图出现摩尔纹,纹理贴图闪烁异常解决办法当threejs加载模型时,会遇到有些模型的贴图有密集网格形状,当有密集四方格类,或者其他形状密集条纹类的贴图时,就会出现摩尔纹. ...
WebGL/ThreeJS几何体、材质、纹理贴图，给几何体披上好看的外衣
1.ThreeJS的常见几何体 BufferGeometry和Geometry有什么不同? 如果你想简单理解BufferGeometry和Geometry有什么不同,就是两者的数据结构不同,缓冲类型几 ...
【threeJS】纹理贴图
纹理贴图设置 //镜面处理 texture.flipY=false; //边缘处理 texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 加载纹理 ...
Threejs入门之十六：纹理贴图和纹理材质
Texture 用于创建一个纹理贴图,将其应用到一个物体的表面,纹理对象可以通过TextureLoader(纹理加载器)的load()方法来加载一个图片.要使用纹理贴图,首先要创建一个纹理加载器,纹理 ...
threejs 纹理流动_ThreeJs 认识纹理
一.前言这篇文章,我们主要来了解一下 ThreeJs 中纹理相关的知识.渲染一个 3D 物体时,网格 Mesh 决定了这个物体的形状态,如一个球,一辆车,一个人等.而纹理决定了这个物体的表面具体长什 ...

threejs-纹理贴图

前言